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>,
]