function Binding()

in packages/react/src/canvas/dom.tsx [88:141]

• 47 lines of code
• 2 McCabe index (conditional complexity)

function Binding({
  el,
  left,
  top,
  width,
  height,
  children,
}: BindingProps) {

  const bindingRef = useRef<RenderCanvas>(null)

  const [binding] = useState(() => {
    const binding = createElement('Canvas')
    binding.prepareInitialFrame()
    bindingRef.current = binding
    saveRoot(binding, true)
    return binding
  })

  useEffect(() => {
    return () => {
      saveRoot(binding, false)
    }
  }, [binding])

  const dpr = useDprObserver()

  useLayoutEffect(() => {
    binding.el = el
    binding.dpr = dpr
    if (el) {
      el.style.width = `${width}px`
      el.style.height = `${height}px`
    }
    binding.size = Size.fromWH(width, height)
  }, [
    binding,
    el,
    width,
    height,
    dpr,
  ])

  useBinding({
    binding,
    left,
    top,
    width,
    height,
    children,
  })

  return null
}