Switching to Docusaurus

Ilya Lesik

React Figma website has switched to using Docusaurus v2. Docusaurus has many advantages over GitBook that used previously:

  • Better perfomance
  • Working as a single page application
  • Customization abilities
  • Syntax highlighting through Prism.js
  • Light/dark theme switching 😎

Also, Docusaurus developing fast, has awesome community and users.

Selection event handlers

Ilya Lesik

Selection event handlers has supported at react-figma.

Demo:

Code example:

const [checked, setChecked] = React.useState(false);
...
<Frame style={styles.frame}>
<Checkbox
checked={checked}
label="select me"
onSelectionEnter={() => setChecked(true)}
onSelectionLeave={() => setChecked(false)}
/>
<Text style={styles.text}>{checked ? 'Checkbox selected' : 'Checkbox not selected'}</Text>
<Text style={styles.text}>{`Counter: ${counter}`}</Text>
</Frame>

Example