preact-pair
TypeScript icon, indicating that this package has built-in type declarations

1.0.78Β β€’Β PublicΒ β€’Β Published

Coverage License NPM Version Open Issues Size

πŸ–‡οΈ 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 = [] }) => (
		<ul>
			{array.map(key =>
				h(PairedCount, { key }, usePairedCount => {
					const props = usePairedCount(key);

					return h("li", null, h("button", props));
				}),
			)}
		</ul>
	);
</script>

Useful links

Package Sidebar

Install

npm i preact-pair

Weekly Downloads

165

Version

1.0.78

License

MIT

Unpacked Size

9.31 kB

Total Files

11

Last publish

Collaborators

  • loucyx