Preact Pair Reference
🖇️ Util to help with the paired hook pattern.
Usage
📦 Node
Install preact-pair
as a dependency:
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 = [] }) =>
h("ul", {
children: array.map(key =>
h(PairedCount, {
key,
children: usePairedCount => {
const props = usePairedCount(key);
return h("li", { children: h("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. |
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 |
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>
);