Unlock seamless workflows and faster delivery with our latest releases- get the details

Help needed with creating a custom string input component in Sanity Studio

8 replies
Last updated: Apr 2, 2024
Hey all! I would like to create a custom string input component that updates another string field whenever it is changed. I have given it a go and feel like I am missing something really simple! Any help would be really appreciated!
Mar 13, 2024, 5:56 PM
๐Ÿ‘‹ What does your component look like so far and whatโ€™s not working about it?
Mar 13, 2024, 6:46 PM
Very similar to the one in the documentation here .

import {useCallback} from 'react'
import {Stack, Text, TextInput} from '@sanity/ui'
import {set, unset} from 'sanity'

export const SlugPrefix = (props) => {
  const {elementProps, onChange, value = ''} = props

  const handleChange = useCallback((event) => {
    const nextValue = event.currentTarget.value

    // set another field in the document every time this value changes

    onChange(nextValue ? set(nextValue) : unset())
	}, [onChange])

  return (
      <TextInput
        {...elementProps}
        onChange={handleChange}
        value={value}
      />
  )
}
Mar 13, 2024, 7:22 PM
Thanks for the quick response. It is very similar to the one in the documentation here .

import {useCallback} from 'react'
import {Stack, Text, TextInput} from '@sanity/ui'
import {set, unset} from 'sanity'

export const SlugPrefix = (props) => {
  const {elementProps, onChange, value = ''} = props

  const handleChange = useCallback((event) => {
    const nextValue = event.currentTarget.value

    // SET ANOTHER FIELDS VALUE IN THE DOCUMENT BASED ON THIS VALUE

    onChange(nextValue ? set(nextValue) : unset())
	}, [onChange])

  return (
      <TextInput
        {...elementProps}
        onChange={handleChange}
        value={value}
      />
  )
}
See the comment in the handleChange function. Tried a few things but I must have missed something!
๐Ÿ˜ž
Mar 13, 2024, 7:25 PM
Ah ok I gotchu:
import {useCallback} from 'react'
import {set, unset, useClient, useFormValue} from 'sanity'

export const SlugPrefix = (props) => {
  const {renderDefault, elementProps, onChange, value = ''} = props
  const client = useClient({apiVersion: '2024-03-13'})
  const id = useFormValue(['_id'])

  const handleChange = useCallback(
    (event) => {
      const nextValue = event.currentTarget.value
      //change <otherField> to the field you'd like to patch
      client.patch(id).set({otherField: nextValue}).commit()

      onChange(nextValue ? set(nextValue) : unset())
    },
    [onChange],
  )

  return renderDefault({...props, elementProps: {...elementProps, onChange: handleChange}})
}
Mar 13, 2024, 8:44 PM
Thanks so much! I tried this approach and it worked locally but I had some issues when I deployed it! I'll give it another go ๐Ÿ‘
Mar 13, 2024, 9:20 PM
Might not be the recommended way but I removed the useCallback and it seemed to work!
Mar 25, 2024, 10:00 AM
Interesting! I wonder if the dependencies for it were wrong?
Mar 25, 2024, 4:37 PM
ahhh yeah maybe!
Apr 2, 2024, 8:03 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?