export function useBinding()

in packages/react/src/canvas/binding.tsx [16:83]

• 60 lines of code
• 1 McCabe index (conditional complexity)

export function useBinding({
  binding,
  left,
  top,
  width,
  height,
  onReady,
  children,
}: UseBindingOptions) {

  const [rootView] = useState(() => {
    return createElement('View')
  })

  useLayoutEffect(() => {
    binding.child = rootView
    return () => {
      binding.child = undefined
    }
  }, [binding, rootView])

  const state: CanvasState = useMemo(() => {
    const nextState = {
      left,
      top,
      width,
      height,
      binding,
      rootView,
    }
    return nextState
  }, [
    left,
    top,
    width,
    height,
    binding,
    rootView,
  ])

  const [Canvas] = useState(() => {
    return function Canvas(props: { children: ReactNode }) {
      useEffect(() => {
        onReady?.()
      }, [])

      // see https://github.com/DefinitelyTyped/DefinitelyTyped/issues/18051
      return props.children as React.JSX.Element
    }
  })

  useLayoutEffect(() => {
    render(
      <Canvas>
        <CanvasStateContext.Provider value={state}>
          {children}
        </CanvasStateContext.Provider>
      </Canvas>,
      rootView,
    )
  }, [
    state,
    children,
    Canvas,
    rootView,
  ])

}