@threlte/flex

useDimensions

The hook useDimensions can be used to retrieve the computed width and height of a <Flex> or <Box> component as CurrentWritable stores.

The computed width and height is also available as slot props on the components <Flex> and <Box>.

In a <Flex> component

Because there’s no viewport to measure, the width and height of a <Flex> component need to be set manually. Nevertheless, the dimensions of the contents of the <Flex> component will be measured after a layout reflow and can be retrieved using useDimensions in a direct child component to <Flex>.

In a <Box> component

The <Box> component controls element positions only. However, if you wish to handle element dimensions based on the layout calculated by Yoga, you’ll need to manually adapt the content’s size. This is because @threlte/flex lacks knowledge about the inner content’s sizing mechanisms. You can do this by using useDimensions hook in a direct child component to <Box>.

Parent.svelte
<script>
  import { Flex, Box } from '@threlte/flex'
  import Model from './Model.svelte'
</script>

<Flex
  width={100}
  height={100}
  justifyContent="Center"
  alignItems="Stretch"
>
  <Box
    width="auto"
    height="auto"
    flex={1}
  >
    <Model />
  </Box>
</Flex>
Model.svelte
<script>
  import { useDimensions } from '@threlte/flex'

  const { width, height } = useDimensions()
</script>

<T.Mesh
  scale.x={$width}
  scale.y={$height}
>
  <T.BoxGeometry />
  <T.MeshBasicMaterial color="red" />
</T.Mesh>
Previous Page useReflow
Next Page Getting Started