🖇️ Util to help with the paired hook pattern.

Usage

📦 Node

Install preact-pair as a dependency:

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

Import it and use it:

import { useState } from "preact";
import { pair } from "preact-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 preact-pair using the npm: prefix, and use it directly:

import { useState } from "npm:preact";
import { pair } from "npm:preact-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 preact-pair using esm.sh, and use it directly:

<script type="module">
    import { h, useState } from "https://esm.sh/preact";
    import { pair } from "https://esm.sh/preact-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 =>
                h(PairedCount, { key }, usePairedCount => {
                    const props = usePairedCount(key);

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

Useful links

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