✨Discover storytelling in the AI age with Pixar's Matthew Luhn at Sanity Connect, May 8th—register now

Using withDocument HOC to refer to the document in a preview component

14 replies
Last updated: Oct 27, 2022
Is it possible to refer to the
in the
of the document (
- line with
if (document.showCorrectness)

export default {
    name: 'parentObject',
    title: 'Parent',
    type: 'document',
    fields: [
            name: 'showCorrectness',
            title: 'Show Correctness',
            type: 'boolean',
            name: 'answers',
            title: 'Answers',
            type: 'array',
            of: [{ type: 'childObject' }],

import React from 'react';

export default {
    name: 'childObject',
    title: 'Child Object',
    type: 'object',
    fields: [
            title: 'Text',
            name: 'text',
            type: 'string',
            title: 'Is correct',
            name: 'isCorrect',
            type: 'boolean',
            hidden: ({ document }) => {
                return !document.showCorrectness;
            validation: (Rule) =>
                Rule.custom((correctness, { document }) => {
                    if (!document.showCorrectness) {
                        return true;

                    return 'Correctness required';
    preview: {
        select: {
            isCorrect: 'isCorrect',
            text: 'text',
        prepare(child) {
            const PARENT_ICON = {
                correct: '✅',
                incorrect: '❌',
                neutral: '🔵',

            let parentIcon = PARENT_ICON.neutral;

            if (document.showCorrectness) {
                parentIcon = child.isCorrect ? PARENT_ICON.correct : PARENT_ICON.incorrect;

            return {
                title: child.text,
                media: <p>{parentIcon}</p>,
Oct 19, 2022, 9:33 AM
user J
could you take a look here? 🙏 You always have some good advice
Oct 25, 2022, 8:19 AM
I will have a look tomorrow hopefully 🙂 I am so busy atm but will def look into this more ..
Oct 25, 2022, 5:31 PM
okay I had a glance: where do you need the preview to be in?
Oct 25, 2022, 5:32 PM
Because as far as I can see you could define preview half here and there…I could need an actual example i think, and you might want to look into this here… 1mom
Oct 25, 2022, 5:32 PM
you’re in luck 😉 I have an Idea!using
HOC in the preview component and using this instead of prepare etc. When its good enough for inputs , it will be okay in previews (i bet).But still give me something to wrap my head around
Oct 25, 2022, 6:26 PM
It works! 🙆‍♀️ thank you
user J
Oct 26, 2022, 6:04 AM
crazy scientist
Oct 26, 2022, 6:26 AM
,wohoo I am on a good streak :saluting_face:🥰
Oct 26, 2022, 6:27 AM
works so well in many different places.But just as a last fyi: I would not use it for a lot of previews instead of the schema preview unless you test it thoroughly for performance etc.
Oct 26, 2022, 9:37 AM
Thank you again! I have posted my solution here , maybe it will be useful to someone 🤗
Oct 27, 2022, 4:29 AM
You should also post this in the sanity exchange, through the community studio 💪❤️
Oct 27, 2022, 7:39 AM
Really cool thing btw!
Oct 27, 2022, 7:39 AM
I wanted to do it through community studio, but there it is impossible to add images (and in this example they best illustrate the capabilities of the tool)
Oct 27, 2022, 9:22 AM
Ah okay, we are working on the community studio atm so this will change soon … but we will put a pin in it. OR you do not add it as a snippet, but as a guide, which is basically is, so then you have images and more at your disposal 🙂we need more female devs publishing things!
Oct 27, 2022, 6:18 PM

Sanity– build remarkable experiences at scale

Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Was this answer helpful?