Flex with text

[netgfx]

I'm wondering how could we achieve scaling a Box and their contents based on the size of the text inside. The text could change dynamically so the box (or surrounding element) should also resize.

I have this so far https://codesandbox.io/s/angry-maxwell-ovw6c5?file=/src/App.js

Thanks!

[netgfx]

Hi , did you found something for this one ? Facing same issue actually

A bit more complicated but I made this and works: https://codesandbox.io/p/sandbox/r3f-ts-template-nckjsv

Adding the component here for reference as well

import { Flex, Box as FlexBox } from '@react-three/flex'
import { Text } from '@react-three/drei'
import { useRef, useState, useEffect, useLayoutEffect } from 'react'
import { useThree } from '@react-three/fiber'
interface TextBoxProps {
  text: string
  padding?: number
  fontSize?: number
}

export const TextBox: FC<TextBoxProps> = ({ text, padding = 0.2, fontSize = 0.2 }) => {
  const textRef = useRef<any>(null)
  const [dimensions, setDimensions] = useState({ width: 1, height: 1 })
  const [isTextReady, setIsTextReady] = useState(false)

  // Reset text ready state when text changes
  useEffect(() => {
    setIsTextReady(false)
  }, [text])

  useLayoutEffect(() => {
    if (textRef.current && isTextReady) {
      const bbox = textRef.current.geometry?.boundingBox
      if (bbox) {
        const width = Math.abs(bbox.max.x - bbox.min.x)
        const height = Math.abs(bbox.max.y - bbox.min.y)

        // Only update if we have valid, non-zero dimensions
        if (width > 0 && height > 0) {
          setDimensions({
            width: width + padding * 2,
            height: height + padding * 2,
          })
        }
      }
    }
  }, [text, padding, fontSize, isTextReady])

  return (
    <Flex
      size={[dimensions.width, dimensions.height, 0.1]}
      position={[0, 0, 0]}
      flexDirection="row"
      alignItems="center"
      justifyContent="center"
    >
      <FlexBox centerAnchor margin={padding} width="auto">
        <mesh>
          <boxGeometry args={[dimensions.width, dimensions.height, 0.1]} />
          <meshStandardMaterial color="#444444" />
        </mesh>

        <Text
          ref={textRef}
          position={[0, 0, 0.051]}
          fontSize={fontSize}
          color="white"
          anchorX="center"
          anchorY="middle"
          onSync={() => {
            setIsTextReady(true)
          }}
        >
          {text}
        </Text>
      </FlexBox>
    </Flex>
  )
}