Composable signal: createArray

Extends signal setter with all mutating array methods and at + find. See Reference for more details.

Usage

Basic

import { createArray } from "solid-signals";

function ExampleComponent {
  const [array, setArray] = createArray<number>([]);

  return (
    <div>
      <button onClick={() => {
        setArray.push(array().length);
      }}>
        Push
      </button>
      array: {JSON.stringify(array())}
    </div>
  );
}

Result

array: []

[Click: Push]
array: [0]

[Click: Push]
array: [0, 1]

[Click: Push]
array: [0, 1, 2]

Composition

import { createArray, createHistory } from "solid-signals";

function ExampleComponent {
  const [array, setArray] = createArray.wrap(createHistory<number[]>([]));

  return (
    <div>
      <button onClick={() => {
        setArray.push(array().length);
      }}>
        Push
      </button>
      <button onClick={() => {
        setArray.history.back();
      }}>
        Back
      </button>
      array: {JSON.stringify(array())}
    </div>
  );
}

Result

array: []

[Click: Push]
array: [0]

[Click: Push]
array: [0, 1]

[Click: Back]
array: [0]

[Click: Back]
array: []

Reference

setState.at(index: number, value: T): T

Sets array item at the given index, accepts negative integers, which count back from the last item. Returns provided value.

setState.find(predicate: (item: T) => boolean, value: T): T | undefined

Replaces the value of the first element in the array that satisfies the provided testing function. Returns this element or undefined if no appropriate element is found.

Array methods

The following methods use the same api as the built-in JavaScript Array, the following links lead to MDN. To apply non-mutating array methods, use setArray(array().method())

• setState.copyWithin
• setState.fill
• setState.pop
• setState.push
• setState.reverse
• setState.shift
• setState.sort
• setState.splice
• setState.unshift