react-pair v4.0.10
šļø Util to help with the paired hook pattern.
Usage
š¦ Node
Install react-pair
as a dependency:
pnpm add react-pair
# or
npm install react-pair
# or
yarn add react-pair
Import it and use it:
import { useState } from "react";
import { pair } from "react-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 react-pair
using the npm:
prefix, and use it directly:
import { useState } from "npm:react";
import { pair } from "npm:react-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 react-pair
using esm.sh, and use it directly:
<script type="module">
import { createElement, useState } from "https://esm.sh/react";
import { pair } from "https://esm.sh/react-pair";
const useCount = initialCount => {
const [count, setCount] = useState(initialCount);
return { onClick: () => setCount(count + 1), children: count };
};
const PairedCount = pair(useCount);
const Component = ({ array = [] }) =>
createElement("ul", {
children: array.map(key =>
createElement(PairedCount, {
key,
children: usePairedCount => {
const props = usePairedCount(key);
return createElement("li", {
children: createElement("button", props),
});
},
}),
),
});
</script>
Useful links
- š Documentation: TypeDoc generated documentation.
- ā³ Changelog: List of changes between versions.
- ā Tests Coverage: Coveralls page with tests coverage.
8 days ago
19 days ago
24 days ago
29 days ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
2 months ago
1 month ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
3 months ago
3 months ago
3 months ago
3 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
7 months ago
7 months ago
8 months ago
7 months ago
7 months ago
7 months ago
8 months ago
8 months ago
8 months ago
8 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
12 months ago
10 months ago
10 months ago
10 months ago
10 months ago
9 months ago
9 months ago
9 months ago
9 months ago
11 months ago
11 months ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago