Preact Pair by Lou
🖇️ Util to help with the paired hook pattern.
Usage
📦 Node
Install preact-pair
as a dependency:
pnpm add preact-pair# ornpm install preact-pair# oryarn 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>
Useful links
- 📝 Documentation: TypeDoc generated documentation.
- ⏳ Changelog: List of changes between versions.
- ✅ Tests Coverage: Coveralls page with tests coverage.
Internal
PairedComponentProperties
Ƭ PairedComponentProperties<Hook
>: Object
Paired component properties (just children with the paired hook render function).
Type parameters
Name | Type |
---|---|
Hook | extends Function |
Type declaration
Name | Type | Description |
---|---|---|
children | PairedRenderFunction <Hook > | Children has to be a function, and the argument is the paired hook. |
PairedRenderFunction
Ƭ PairedRenderFunction<Hook
>: Unary
<Hook
, ReturnType
<typeof
h
>>
Function that receives the paired hook and must return a VNode
.
Type parameters
Name | Type |
---|---|
Hook | extends Function |
Other
pair
▸ pair<Hook
>(hook
):
FunctionComponent
<PairedComponentProperties
<Hook
>>
Creates a component with a function children that has the given hook in context.
Type parameters
Name | Type |
---|---|
Hook | extends Function |
Parameters
Name | Type | Description |
---|---|---|
hook | Hook | Hook 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>);