Function createDelegateContext

  • Creates a context that merges delegated props and refs.

    Context children are re-rendered if props or ref is changed.

    If a provider is nested in a provider of the same delegate context, then it merges its props and ref with props and ref received from the enclosing provider.

    Type Parameters

    • P = {}

      Delegated props.

    • E = any

      An element to which props are delegated.

    Returns DelegateContext<P, E>

    A context that carries delegated props and a ref.

    // 1. Create a context
    const MyContext = createDelegateContext<{ foo: string }>();

    // 2. Use context in a component
    function Bar() {
    const { props, ref } = useContext(MyContext);

    // Use props and ref here
    return props.foo;
    }

    // 3. Render a provider and delegate props and ref to a child component,
    <MyContext.Provider props={{ foo: 'hello' }}>
    <Bar/>
    </MyContext>