Hi Ronen,

Thanks for the callout! Documentation will be added for the useSynced hook soon.

In the meantime, here’s an example of what the returned values for useSynced look like:

import {useBase, useSynced} from '@airtable/blocks/ui';



function CustomInputSynced() {

   const tvalue, setValue, canSetValue] = useSynced('myGlobalConfigKey');

   return (

        <input

             type="text"

             value={value}

             onChange={e => setValue(e.target.value)}

             disabled={!canSetValue}

         />

   );

}

Similar to React.useState, the first two values in the returned array are the current value and the setter function. The third value is a boolean that indicates whether the user has permission to update globalConfig.

Cheers,

Billy

Thanks, and can I also use an array for global config key, same as in globalConfig.setAsync?

Yes, the globalConfigKey can be an array path.

I’m getting a runtime error trying to use in a typescript block (I’m on v0.0.43):

TypeError: (0 , _ui.useSynced) is not a function or its return value is not iterable

TypeError: (0 , _ui.useSynced) is not a function or its return value is not iterable

Can you provide a code snippet for the component you’re using this hook in?

I’m using visual studio code and the typescript compiler doesn’t recognize useSynced - it’s underlined in red, and this is the error message:

Module '"../node_modules/@airtable/blocks/ui"' has no exported member 'useSynced'.ts(2305)

This is the code:

import {

	useGlobalConfig,

	useSynced,

	Text,

	TextButton

	} from '@airtable/blocks/ui'



export default function Editor() {

	const ccontent, setContent, canSetContent] = useSynced(y'editor', 'content'])



	....

}

Module '"../node_modules/@airtable/blocks/ui"' has no exported member 'useSynced'.ts(2305)

import {

	useGlobalConfig,

	useSynced,

	Text,

	TextButton

	} from '@airtable/blocks/ui'



export default function Editor() {

	const ccontent, setContent, canSetContent] = useSynced(y'editor', 'content'])



	....

}

Ah, it appears we don’t properly export useSynced in 0.0.43. We’ll fix this in the next SDK version — apologies for the confusion!

useSynced is now properly exported in 0.0.44. You can find the documentation here: Airtable Blocks SDK