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
1
pnpm add preact-pair
2
# or
3
npm install preact-pair
4
# or
5
yarn add preact-pair

Import it and use it:

1
import { useState } from "preact";
2
import { pair } from "preact-pair";
3
4
const useCount = initialCount => {
5
const [count, setCount] = useState(initialCount);
6
7
return { onClick: () => setCount(count + 1), children: count };
8
};
9
10
const PairedCount = pair(useCount);
11
12
const Component = ({ array = [] }) => (
13
<ul>
14
{array.map(key => (
15
<PairedCount key={key}>
16
{usePairedCount => {
17
const props = usePairedCount(key);
18
19
return (
20
<li>
21
<button type="button" {...props} />
22
</li>
23
);
24
}}
25
</PairedCount>
26
))}
27
</ul>
28
);

🦕 Deno

Import preact-pair using the npm: prefix, and use it directly:

1
import { useState } from "npm:preact";
2
import { pair } from "npm:preact-pair";
3
4
const useCount = initialCount => {
5
const [count, setCount] = useState(initialCount);
6
7
return { onClick: () => setCount(count + 1), children: count };
8
};
9
10
const PairedCount = pair(useCount);
11
12
const Component = ({ array = [] }) => (
13
<ul>
14
{array.map(key => (
15
<PairedCount key={key}>
16
{usePairedCount => {
17
const props = usePairedCount(key);
18
19
return (
20
<li>
21
<button type="button" {...props} />
22
</li>
23
);
24
}}
25
</PairedCount>
26
))}
27
</ul>
28
);

🌎 Browser

Import preact-pair using esm.sh, and use it directly:

1
<script type="module">
2
import { h, useState } from "https://esm.sh/preact";
3
import { pair } from "https://esm.sh/preact-pair";
4
5
const useCount = initialCount => {
6
const [count, setCount] = useState(initialCount);
7
8
return { onClick: () => setCount(count + 1), children: count };
9
};
10
11
const PairedCount = pair(useCount);
12
13
const Component = ({ array = [] }) =>
14
h("ul", {
15
children: array.map(key =>
16
h(PairedCount, {
17
key,
18
children: usePairedCount => {
19
const props = usePairedCount(key);
20
21
return h("li", { children: h("button", props) });
22
},
23
}),
24
),
25
});
26
</script>

Internal

PairedComponentProperties<Hook>

1
type PairedComponentProperties<Hook>: object;

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

Type parameters

Type parameter
Hook extends Function

Type declaration

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

View source


PairedRenderFunction<Hook>

1
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()

1
function pair<Hook>(
2
hook: Hook,
3
): 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

ParameterTypeDescription
hookHookHook to be paired.

Returns

FunctionComponent<PairedComponentProperties<Hook>> & object

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

Example

1
const useCount = initialCount => {
2
const [count, setCount] = useState(initialCount);
3
4
return { onClick: () => setCount(count + 1), children: count };
5
};
6
7
const PairedCount = pair(useCount);
8
9
const Component = ({ array = [] }) => (
10
<ul>
11
{array.map(key => (
12
<PairedCount key={key}>
13
{usePairedCount => {
14
const props = usePairedCount(key);
15
16
return (
17
<li>
18
<button type="button" {...props} />
19
</li>
20
);
21
}}
22
</PairedCount>
23
))}
24
</ul>
25
);

View source