Feel free to submit any pull requests or create issues for anything you think might be useful!
provide-array
Provider factory for Array
instances to be shared across multiple React components.
Table of contents
Installation
npm install provide-array --save
Usage
Use provide-array
to create providers with predictably named actions
and reducers
specific to manipulating arrays. Create as many providers/instances as you want and share them across multiple components.
The main export provideArray
takes 3 arguments:
listName
defaults to 'list'
itemName
defaults to 'item'
indexName
defaults to 'index'
Condensed example (defaults)
;;; const list = ; const defaultProps = providers: list: ...list state: list: fruit: 'apple' fruit: 'banana' vegetable: 'carrot' ; ;
Components can then use the following default actions
and reducers
via propTypes
.
Default actions
setList (Array list)
- sets the listsortList (Function sort)
- sorts the listreverseList ()
- reverses the listupdateList (Function update)
- updates each item in the listfilterList (Function filter)
- filters items in the listshiftList ()
- removes the first item from the listpopList ()
- removes the last item from the listsliceList (begin, end)
- sets the list to the result of the slicespliceList (begin, deleteCount, ...items)
- sets the list to the resulting spliceclearList ()
- clears the listunshiftItem (...items)
- puts the item(s) at the beginning of the listpushItem (...items)
- puts the item(s) at the end of the listsetItem (index, item)
- sets the item at theindex
updateItem (index, item)
- updates or sets the item at someindex
; if the existing item the update are both objects, it will merge the two as a new objectdeleteItem (index)
- deletes the item at someindex
Default reducers
list
- the list instance, of courselistLength
- the length of the list instanceitem
- if the component instance contains a prop key matching theindexName
(e.g.,index
), theitem
at that key within the list will be provided
Condensed example (custom)
;;; const goodList = ; const defaultProps = providers: goodList: ...goodList: state: goodList: fruit: 'apple' fruit: 'banana' vegetable: 'carrot' ; ;
Components can then use the following custom actions
and reducers
via propTypes
.
Custom actions
setList
->setGoodList
sortList
->sortGoodList
reverseList
->reverseGoodList
updateList
->updateGoodList
filterList
->filterGoodList
shiftList
->shiftGoodList
popList
->popGoodList
sliceList
->sliceGoodList
spliceList
->spliceGoodList
clearList
->clearGoodList
unshiftItem
->unshiftGoodItem
pushItem
->pushGoodItem
setItem
->setGoodItem
updateItem
->updateGoodItem
deleteItem
->deleteGoodItem
Custom reducers
list
->goodList
listLength
->goodListLength
item
->goodItem