How to access parent object in custom input component in Sanity v3?

In Sanity Studio v3, the parent object is no longer automatically passed as a prop to custom input components. Instead, you need to use the useFormValue hook to access parent or document values.

Accessing Parent Values in v3

Here's how to migrate from the v2 approach to v3:

In v2, you used props.parent:

import {withDocument} from 'part:@sanity/form-builder'

function MyInput(props) {
  const parentValue = props.parent.someField
  return <div>{/* ... */}</div>
}

export default withDocument(MyInput)

In v3, use the useFormValue hook:

import {useFormValue} from 'sanity'

function MyInput(props) {
  // Access a specific field from the parent/document
  const parentValue = useFormValue(['someField'])
  
  // Or access the entire document
  const document = useFormValue([])
  
  return <div>{/* ... */}</div>
}

export default MyInput

How useFormValue Works

The useFormValue hook takes an array representing the path to the value you want to access:

• useFormValue([]) - Gets the entire document
• useFormValue(['title']) - Gets the title field
• useFormValue(['author', 'name']) - Gets nested values

For accessing parent object values when your input is nested inside an object, you can use props.path to construct the parent path:

import {useFormValue} from 'sanity'

function MyInput(props) {
  // Get parent path by removing the last segment
  const parentPath = props.path.slice(0, -1)
  const parentValue = useFormValue(parentPath)
  
  return <div>{/* ... */}</div>
}

This change was part of the Studio v2 to v3 migration, where the parts system was deprecated in favor of React hooks for better composability and type safety.