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.