React Pair Reference

🖇️ 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 = [] }) =>
		createElement("ul", {
			children: array.map(key =>
				createElement(PairedCount, {
					key,
					children: usePairedCount => {
						const props = usePairedCount(key);

						return createElement("li", {
							children: createElement("button", props),
						});
					},
				}),
			),
		});
</script>

Useful links

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

Internal

PairedComponentProperties<Hook>

type PairedComponentProperties<Hook>: object;

Paired component properties (just children with the paired hook render function).

Type parameters

Type parameter
Hook extends Function

Type declaration

Member	Type	Description
children	PairedRenderFunction<Hook>	Children has to be a function, and the argument is the paired hook.

View source

---

PairedRenderFunction<Hook>

type PairedRenderFunction<Hook>: Unary<Hook, ReturnType<typeof createElement>>;

Function that receives the paired hook and must return a ReactElement.

Type parameters

Type parameter
Hook extends Function

View source

Other

pair()

function pair<Hook>(
	hook: Hook,
): FunctionComponent<PairedComponentProperties<Hook>> & object;

Creates a component with a function children that has the given hook in context.

Type parameters

Type parameter
Hook extends Function

Parameters

Parameter	Type	Description
hook	Hook	Hook to be paired.

Returns

FunctionComponent<PairedComponentProperties<Hook>> & object

Component that expects a function as children with the paired hook.

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

View source

preact-pair

Internal

PairedComponentProperties<Hook>

type PairedComponentProperties<Hook>: object;

Paired component properties (just children with the paired hook render function).

Type parameters

Type parameter
Hook extends Function

Type declaration

Member	Type	Description
children	PairedRenderFunction<Hook>	Children has to be a function, and the argument is the paired hook.

View source

---

PairedRenderFunction<Hook>

type PairedRenderFunction<Hook>: Unary<Hook, ReturnType<typeof h>>;

Function that receives the paired hook and must return a VNode.

Type parameters

Type parameter
Hook extends Function

View source

Other

pair()

function pair<Hook>(
	hook: Hook,
): FunctionComponent<PairedComponentProperties<Hook>> & object;

Creates a component with a function children that has the given hook in context.

Type parameters

Type parameter
Hook extends Function

Parameters

Parameter	Type	Description
hook	Hook	Hook to be paired.

Returns

FunctionComponent<PairedComponentProperties<Hook>> & object

Component that expects a function as children with the paired hook.

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

View source