useReflow

The hook useReflow allows you to manually request a layout reflow, for instance when a <Text> component finished synchronizing or when a model has loaded into view and there’s no easy access to the reflow slot prop of the components <Flex> or <Box> because of component composition. Calls to reflow will be limited to once per frame, so it’s safe to call it from multiple components at a time.

Scene.svelte

<script lang="ts">
  import { Flex, Box } from '@threlte/flex'
  import Label from './Label.svelte'
</script>

<Flex width={100}>
  <Box>
    <Label text="Hello World">
  </Box>
</Flex>

Label.svelte

<script lang="ts">
  import { Text } from '@threlte/extras'
  import { useReflow } from '@threlte/flex/hooks'

  export let text: string

  const reflow = useReflow()
</script>

<Text
  {text}
  onsync={() => {
    reflow()
  }}
/>