🖇️ Util to help with the paired hook pattern.

Installation

Direct usage

For envs like Deno or the browser:

import { pair } from "https://esm.sh/preact-pair";

Local installation

For Node:

npm i preact-pair

Usage

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

Documentation

Documentation can be found HERE. It is auto-generated with typedoc based on the JSDocs and the types in the source. Shouldn't be necessary to read this, code editors like VSCode integrate the documentation in the UI.

Changelog

Changelog can be found HERE.