Documentation for useSynced

[Ronen_Babayoff]

Hey,

Noticed that in the latest block sdk version you export useSynced (great feature). There is no documentation for it in the docs.

Cheers,
Ronen Babayoff
Superblocks.at

[Billy_Littlefie]

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

[Ronen_Babayoff]

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

[Stephen_Suen]

Ronen_Babayoff:

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.

[Ronen_Babayoff]

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

[Stephen_Suen]

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

[Ronen_Babayoff]

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'])

	....
}

[Stephen_Suen]

Ronen_Babayoff:

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!

[Emma_Yeap]

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