Skip to content

Preact Pair Reference

Coverage License NPM Version Open Issues Size

🖇️ Util to help with the paired hook pattern.

Usage

📦 Node

Install preact-pair as a dependency:

Terminal window
pnpm add preact-pair
# or
npm install preact-pair
# or
yarn add preact-pair

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

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

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

Internal

PairedComponentProperties

Ƭ PairedComponentProperties<Hook>: Object

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

Type parameters

NameType
Hookextends Function

Type declaration

NameTypeDescription
childrenPairedRenderFunction<Hook>Children has to be a function, and the argument is the paired hook.

View source


PairedRenderFunction

Ƭ PairedRenderFunction<Hook>: Unary<Hook, ReturnType<typeof h>>

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

Type parameters

NameType
Hookextends Function

View source

Other

pair

pair<Hook>(hook): FunctionComponent<PairedComponentProperties<Hook>>

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

Type parameters

NameType
Hookextends Function

Parameters

NameTypeDescription
hookHookHook to be paired.

Returns

FunctionComponent<PairedComponentProperties<Hook>>

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