&labelColor=666&color=0a8&suffix=KiB&query=%24.size&url=https%3A%2F%2Fraw.githubusercontent.com%2Floucyx%2Flou.codes%2Fmain%2Fpackages%2Fpreact-pair%2Fpackage.json){kind=icon}
🖇️ Util to help with the paired hook pattern.
Install preact-pair as a dependency:
pnpm add preact-pair
# or
npm install preact-pair
# or
yarn add preact-pairImport 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>
);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>
);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>- 📝 Documentation: TypeDoc generated documentation.
- ⏳ Changelog: List of changes between versions.
- ✅ Tests Coverage: Coveralls page with tests coverage.