BRAID
Braid Logo
 

useSpace

Current grid size is: 4px.Xxlarge space spans 15 rows.
<Stack space="medium">
  <Text>
    Current grid size is: <Strong>{useSpace().grid}</Strong>px.
  </Text>
  <Text>
    Xxlarge space spans <Strong>{useSpace().space.xxlarge}</Strong> rows.
  </Text>
</Stack>
Open in Playroom

Alternatives

  • Box — For custom layouts.

Development considerations

Retrieves the space and grid definitions of the current theme from context.
const { space, grid } = useSpace();

return (
  <Placeholder
    width={grid * space.xxlarge}
    height={grid * space.xxlarge}
  />
);