LogoLogo
  • Home
  • Services
    • Fiber
    • Accessor
    • Schema
    • Form
    • Translator
  • Components
    • <Router/>
    • <Memo />
  • Observables
    • Async
    • Value
    • Store
    • List
    • Local Storage Value
    • Local Storage Store
    • Local Storage List
  • Hooks
    • useAsync
    • useAffect
    • useStream
    • useAction
    • useDebounce
    • useThrottle
    • usePrevious
    • useIdle
    • useValue
    • useList
    • useStore
    • useForm
    • useFormBinder
    • useTranslator
    • useQuery
  • Helpers
    • Tag
    • Input Helpers
    • Promise Helpers
    • Save Helpers
    • Pagination Helpers
    • Clipboard Helpers
    • Calendar Helpers
    • Local Storage Helpers
Powered by GitBook
On this page
  • createList()
  • List.get()
  • List.getAt()
  • List.set()
  • List.add()
  • List.addAt()
  • List.has()
  • List.hasAt()
  • List.remove()
  • List.removeAt()
  • List.indexOf()
  • List.filter()
  • List.map()
  • List.forEach()
  • List.listen()
  • List.use()

Was this helpful?

  1. Observables

List

Simple list that can be hooked into React.

PreviousStoreNextLocal Storage Value

Last updated 3 years ago

Was this helpful?

Source code is hosted on

yarn add @corets/list
npm install --save @corets/list

Seamless React integration is shipped in a separate package:

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

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()
GitHub
useList
Local Storage List