@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> 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
# or
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 map
• keyFn - 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