@coven/pair@0.8.3

Built and signed on GitHub Actions

Built and signed on GitHub Actions

🖇️ Paired hook pattern helper. It only makes pairing simpler and provides a little bit better DX (integration with React Devtools by setting a displayName automatically), while also having 100% coverage like with all Coven Engineering libraries.

Currently supported frameworks:

• ⚛ Preact: @coven/pair/preact.
• ⚛ React: @coven/pair/react.

Examples

Preact

/** @jsxImportSource preact */
import { useState } from "preact/hooks";
import { pair } from "@coven/pair/preact";

const useCount = (initialCount: number) => {
	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>
);

React

/** @jsxImportSource react */
import { useState } from "react";
import { pair } from "@coven/pair/react";

const useCount = (initialCount: number) => {
	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>
);

Other links

• Coverage.