@solid-primitives/keyed
v1.5.3TypeScript
Control Flow primitives and components that require specifying explicit keys to identify or rerender elements.
0/weekUpdated 2 weeks agoMITUnpacked: 23.9 KB
Published by Damian Tarnawski @thetarnav
npm install @solid-primitives/keyed
@solid-primitives/keyed
Control Flow primitives and components that require specifying explicit keys to identify or rerender elements.
- keyArray - Reactively maps an array by specified key with a callback function - underlying helper for the
- Key - Creates a list of elements by mapping items by provided key.
- Entries - Creates a list of elements by mapping object entries.
- MapEntries - Creates a list of elements by mapping Map entries.
- SetValues - Creates a list of elements by mapping Set values.
- Rerun - Causes the children to rerender when the on changes.
Installation
``bash`
npm install @solid-primitives/keyedor
yarn add @solid-primitives/keyed
keyArray
Reactively maps an array by specified key with a callback function - underlying helper for the
$3
#### Import
`ts`
import { keyArray } from "@solid-primitives/keyed";
#### Basic usage
The keyArray primitive takes 4 arguments:
- list - input list of values to mapkeyFn
- - key getter, items will be identified by it's value. changing the value is changing the item.mapFn
- - reactive function used to create mapped output item. Similar to Array.prototype.map but both item and index are signals, that could change over time.options
- - a fallback for when the input list is empty or missing _(Optional)_
`ts
const mapped = keyArray(
source,
model => model.id,
(model, index) => {
const [name, setName] = createSignal(model().name);
const [description, setDescription] = createSignal(model().description);
createComputed(() => {
setName(model().name);
setDescription(model().description);
});
return {
id: model.id,
get name() {
return name();
},
get description() {
return description();
},
get index() {
return index();
},
setName,
setDescription,
};
},
);
`
Notice that both the value and index arguments are signals. Items are identified only by keys, it means that the items could be copied, replaced, changed, but as long as the key is the same, keyArray will treat it as the same item.
Creates a list of elements by mapping items by provided key. Similar to Solid's and , but here, both value and index arguments are signals.
But changing the value does not rerender the element, only where the value is being used.
$3
#### Import
`ts`
import { Key } from "@solid-primitives/keyed";
#### Typical usage
Both each and by have to be provided. The fallback prop is optional, it will be displayed when the list in each is missing or empty.
`tsx`No items}>
{item => {item()}}
#### Key shortcut
prop by can also be an object key
`tsx`
#### Index argument
Second argument of the map function is an index signal.
`tsx`
{(item, index) => {item()}}
$3
https://codesandbox.io/s/solid-primitives-keyed-key-demo-gh7gd?file=/index.tsx
Creates a list of elements by mapping object entries. Similar to Solid's and , but here, render function takes three arguments, and both value and index arguments are signals.
$3
`tsx
import { Entries } from "@solid-primitives/keyed";
{(key, value) => (
{key}: {value()}
)}
;
`
$3
Third argument of the map function is an index signal.
tsx
No items {(key, value, index) => (
{key}: {value()}
)}
`
Creates a list of elements by mapping Map entries. Similar to Solid's
and , but here, render function takes three arguments, and both value and index arguments are signals.$3
`tsx
import { MapEntries } from "@solid-primitives/keyed";const [map, setMap] = createSignal(new Map());
No items
{(key, value) => (
{key}: {value()}
)}
;
`
$3
Third argument of the map function is an index signal.
is using Map#keys() so the index and resulting JSX will follow the insertion order.`tsx
No items {(key, value, index) => (
{key}: {value()}
)}
`
Creates a list of elements by mapping Set values. Similar to Solid's
and , but here, render function takes two arguments, the value and the index argument as a signal.$3
`tsx
import { SetValues } from "@solid-primitives/keyed";const [set, setSet] = createSignal(new Set());
No items
{value =>
{value}
};
`
$3
Second argument of the map function is an index signal.
is using Set#values() so the index and resulting JSX will follow the insertion order.`tsx
No items