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

You should only use this Hook if you’re unable to use Box or vars.

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} />
)

Braid Logo