Help

Save the date! Join us on October 16 for our Product Ops launch event. Register here.

Re: Documentation for useSynced

1851 0
cancel
Showing results for 
Search instead for 
Did you mean: 
Ronen_Babayoff
7 - App Architect
7 - App Architect

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

8 Replies 8
Billy_Littlefie
7 - App Architect
7 - App Architect

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
7 - App Architect
7 - App Architect

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
7 - App Architect
7 - App Architect

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

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

Ronen_Babayoff
7 - App Architect
7 - App Architect

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

	....
}

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
Airtable Employee
Airtable Employee

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