React Pair by Vangware

Coverage License NPM Version Open Issues

🖇️ 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

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

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

🌎 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>

Useful links