How to get a field's parent in a custom input component in Sanity
7 replies
Last updated: Sep 28, 2021
J
Another one… Getting a field’s
parentis super helpful on the new conditional hidden fields. I need to do something similar with a custom input component, but it’s not available in the props. Is there something similar to
withDocumenti.e.
withParent? Or another way to get this prop in? more in thread ->
Sep 28, 2021, 1:19 AM
J
Looking at the React Components dev tools, here are the props passed into my custom input component:
Sep 28, 2021, 1:19 AM
J
If I go up a few components to the
ObjectInputField, I see the
parentprop that I need:
Sep 28, 2021, 1:20 AM
J
Found a hacky way to do this by consuming the
ChangeIndicatorContext:
Sep 28, 2021, 1:38 AM
J
import { ChangeIndicatorContext } from '@sanity/base/change-indicators'; // other imports interface ModelHighlightedFieldsInputProps extends CustomInputComponentProps<string> { document: Sanity.Schema.Article; } type FullPath = Array<string | { _key: string }>; interface ChangeIndicatorContextValue { fullPath: FullPath; } export const useChangeIndicator = () => { const ctx = React.useContext(ChangeIndicatorContext); if (!ctx) throw new Error('useSearchContext must be used within a ThemeProvider'); return ctx as ChangeIndicatorContextValue; }; const getParent = ( document: Sanity.Schema.Article, fullPath: FullPath, ): Sanity.Schema.ModelReference => { return fullPath.slice(0, -1).reduce((prevValue, pathNode) => { if (typeof pathNode === 'string') return prevValue[pathNode]; if (Array.isArray(prevValue)) { return prevValue.find((item) => item._key === pathNode._key); } throw new Error('Not sure how we got here'); }, document); }; const ModelHighlightedFieldsInputBase: React.FC<ModelHighlightedFieldsInputProps> = (props, ref) => { const { fullPath } = useChangeIndicator(); const { document, type } = props; const parent = getParent(document, fullPath); // the rest of my component }
Sep 28, 2021, 1:39 AM
D
There’s a
withValuePathyou can use in combination with
withDocumentto get the necessary data — checkout the slug input component to see usage example
Sep 28, 2021, 6:19 AM
D
J
Thank you!
Sep 28, 2021, 5:00 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.