Documentation for useSynced

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 [value, 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 [content, setContent, canSetContent] = useSynced(['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 [content, setContent, canSetContent] = useSynced(['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