Function pair

  • Creates a component with a function children that has the given hook in context.

    Example

    const useCount = initialCount => {
    const [count, setCount] = useState(initialCount);

    return { onClick: () => setCount(count + 1), children: count };
    };

    const PairedCount = pair(useCount);

    const Component = ({ array = [] }) => (
    <ul>
    {array.map(key => (
    <PairedCount key={key}>
    {usePairedCount => {
    const props = usePairedCount(key);

    return (
    <li>
    <button
    type="button"
    {...props}
    />
    </li>
    );
    }}
    </PairedCount>
    ))}
    </ul>
    );

    Returns

    Component that expects a function as children with the paired hook.

    Type Parameters

    • Hook extends GenericFunction<ReadOnlyArray<never>, unknown>

    Parameters

    • hook: Hook

      Hook to be paired.

    Returns FunctionComponent<PairedComponentProperties<Hook>>