List

Simple list that can be hooked into React.

Source code is hosted on GitHub

yarn

yarn add @corets/list

npm

Seamless React integration is shipped in a separate package:

useList

There is a version of this package that syncs directly to the localStorage:

Local Storage List

createList()

Creates a new instance of observable list:

import { createList } from "@corets/list"

const list = createList(["some", "data"])

Create a new instance without the factory function:

import { List } from "@corets/list"

const list = new List(["some", "data"])

Create a new instance with a custom differ:

import { createList } from "@corets/list"

const differ = (oldValue, newValue) => true
const list = createList(["some", "data"], { differ })

List.get()

Retrieve everything from the list:

list.get()

List.getAt()

Retrieve a value at the specific index:

list.getAt(0)

List.set()

Replace everything in the list:

list.set(["mango", "potato"])

List.add()

Append some new values to the list:

list.add("oranges", "beans")

List.addAt()

Add a value at the specific index:

list.addAt(1, "chili")

List.has()

Check if a specific value is in the list:

list.has("oranges")

List.hasAt()

Check if there is a value at the specific index:

list.hasAt(1)

List.remove()

Remove a value from the list:

list.remove("beans")

List.removeAt()

Remove value at the specific index:

list.removeAt(1)

List.indexOf()

Get index of a specific value:

list.indexOf("oranges")

List.filter()

Filter values in the list:

list.filter((value, index) => true)

List.map()

Map values in the list:

list.map((value, index) => newValue)

List.forEach()

Iterate over values in the list:

list.forEach((value, index) => {})

List.listen()

Listen to changes:

list.listen(state => console.log(state))

Invoke listener immediately:

list.listen(state => console.log(state), { immediate: true })

Listen with a custom differ:

const differ = (oldValue, newValue) => true

list.listen(state => console.log(state), { differ })

List.use()

Convenience method for people used to React's useState syntax:

import { createList } from "@corets/list"

const [list, setList] = createList([1, 2]).use()