useDynamicList

A React Hook that helps to manage dynamic list of items.

Demo

Source
[
  {
    "name": "Alice",
    "age": "20"
  },
  {
    "name": "Bob",
    "age": "21"
  },
  {
    "name": "Charlie",
    "age": "22"
  }
]

Usage

See API for more details.

Source

Click links below to view source on GitHub.

API

const [list, actions] = useDynamicLis(initialList)

InitialList

Any array of items, default to [] (unknown[]).

Returns

export interface UseDynamicListReturnsActions<T> { /** * insert an item at the specified index */ insert: (index: number, item: T) => void /** * merge items at the specified index */ merge: (index: number, items: T[]) => void /** * replace an item at the specified index */ replace: (index: number, item: T) => void /** * remove an item at the specified index */ remove: (index: number) => void /** * get the key of the item at the specified index */ getKey: (index: number) => number /** * get the index of the item with the specified key */ getIndex: (key: number) => number /** * move an item from the old index to the new index */ move: (oldIndex: number, newIndex: number) => void /** * push an item to the end of the list */ push: (item: T) => void /** * pop an item from the end of the list */ pop(): void /** * unshift an item to the start of the list */ unshift: (item: T) => void /** * shift an item from the start of the list */ shift(): void /** * sort the list based on the specified result */ sort: (result: T[]) => T[] /** * reset the list */ reset: (newList: T[]) => void /** * set the list */ setList: ReactSetState<T[]> } export type UseDynamicListReturns<T> = readonly [ /** * list of items */ list: T[], UseDynamicListReturnsActions<T>, ]