<Fragment />
The Fragment component does not take any props outside of children
and an optional key
prop. This component simply renders its children
and behaves similarly to Fragments in React.
This component cannot be used as the root component of a widget.
To set this up, make sure you have the following lines added to your tsconfig.json
tsconfig.json
{
"compilerOptions": {
"jsxFactory": "figma.widget.h",
// Add this line
"jsxFragmentFactory": "figma.widget.Fragment",
...
}
}
When writing JSX, you can now use the following syntax:
Fragment with empty tags
const { widget } = figma
const { Text } = widget
function NameList({ names }: { names: string[] }) {
return (
<>
{names.map(name => <Text key={name}>{name}</Text>)}
</>
)
}
Alternatively, if you can also reference the Fragment component directly if you need to:
Fragment component
const { widget } = figma
const { Text, Fragment } = widget
function NameList({ names }: { names: string[] }) {
return (
<Fragment>
{names.map(name => <Text key={name}>{name}</Text>)}
</Fragment>
)
}
This is useful if you need to specify the key prop when working with lists.