🖇️ Util to help with the paired hook pattern.

Usage

📦 Node

Install react-pair as a dependency:

pnpm add react-pair
# or
npm install react-pair
# or
yarn add react-pair
Copy

Import it and use it:

import { useState } from "react";
import { pair } from "react-pair";

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>
);
Copy

🦕 Deno

Import react-pair using the npm: prefix, and use it directly:

import { useState } from "npm:react";
import { pair } from "npm:react-pair";

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>
);
Copy

🌎 Browser

Import react-pair using esm.sh, and use it directly:

<script type="module">
    import { createElement, useState } from "https://esm.sh/react";
    import { pair } from "https://esm.sh/react-pair";

    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 =>
                createElement(PairedCount, { key }, usePairedCount => {
                    const props = usePairedCount(key);

                    return createElement(
                        "li",
                        null,
                        createElement("button", props),
                    );
                }),
            )}
        </ul>
    );
</script>
Copy

Useful links

• 📝 Documentation: TypeDoc generated documentation.
• ⏳ Changelog: List of changes between versions.
• ✅ Tests Coverage: Coveralls page with tests coverage.