@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>
control flow.Key
- Creates a list of elements by mapping items by provided key.Entries
- Creates a list of elements by mapping object entries.
Installation
npm install @solid-primitives/keyed
yarn add @solid-primitives/keyed
keyArray
Reactively maps an array by specified key with a callback function - underlying helper for the <Key>
control flow.
How to use it
Import
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)
const mapped = keyArray(source, (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 singlas. 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.
<Key>
Creates a list of elements by mapping items by provided key. Similar to Solid's <For>
and <Index>
, 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.
How to use it
Import
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.
<Key each={items()} by={item => item.id} fallback={<div>No items</div>}>
{item => <div>{item()}</div>}
</Key>
Key shortcut
prop by
can also be an object key
<Key each={items()} by="id">
Index argument
Second argument of the map function is an index signal.
<Key each={items()} by="id">
{(item, index) => <div data-index={index()}>{item()}</div>}
</Key>
Demo
https://codesandbox.io/s/solid-primitives-keyed-key-demo-gh7gd?file=/index.tsx
<Entries>
Creates a list of elements by mapping object entries. Similar to Solid's <For>
and <Index>
, but here, render function takes three arguments, and both value and index arguments are signals.
How to use it
import { Entries } from "@solid-primitives/keyed";
<Entries of={object()} fallback={<div>No items</div>}>
{(key, value) => (
<div>
{key}: {value()}
</div>
)}
</Entries>;
Index argument
Third argument of the map function is an index signal.
<Entries of={object()} fallback={<div>No items</div>}>
{(key, value, index) => (
<div data-index={index()}>
{key}: {value()}
</div>
)}
</Entries>
Changelog
See CHANGELOG.md