Help needed with creating a custom string input component in Sanity Studio
8 replies
Last updated: Apr 2, 2024
W
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
W
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
W
Thanks for the quick response. It is very similar to the one in the documentation here .
See the comment in the handleChange function. Tried a few things but I must have missed something!
😞
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}
/>
)
}😞
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
W
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
W
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
W
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.