Items

A state container which provides an interface for adding and removing
items from simple arrays and sets while maintaining immutability on those
arrays and sets, allowing for strict-comparison in child components.

$3

``yarn add @render-props/items` or `npm i @render-props/items`


Usage

js
import Items, {ItemSet} from '@render-props/items'
const ArrayItems = props => (
  
    {
      ({items, addItem, deleteItem, setItems, clearItems, includes}) => (
        

          
            
              Number of items:
            
            
              {items.length}
            
          
          
 {
            e.preventDefault()
            const field = document.getElementById('item1')
            addItem(field.value)
            field.value = ''
          }}>
            
          
          {items.map(item => (
                          key={item}
              onClick={() => deleteItem(item)}
            >
              Delete '{item}'
            
          ))}
          
        

      )
    }
  
)
const SetItems = props => (
      function ({items, addItem, deleteItem}) {
      const arrItems = Array.from(items)
      deleteItem(arrItems.shift())
      addItem(arrItems.pop())
    }
  }>
    {
      ({items, addItem, deleteItem, setItems, clearItems, includes}) => (
        

          
            
              Number of items:
            
            
              {items.size}
            
          
          
 {
            e.preventDefault()
            const field = document.getElementById('item2')
            addItem(field.value)
            field.value = ''
          }}>
            
          
          {
            Array.from(items).map(item => (
                              key={item}
                onClick={() => deleteItem(item)}
              >
                Delete '{item}'
              
            ))}
          
        

      )
    }
  
)


____
Props

-

initialItems {array|set}


  - the initial state of

items

 in the component
-

minItems {integer}


  - the minimum number of

items

 that should be in the state
-

maxItems {integer}


  - the maximum number of

items

 that can be added to the state
-

onBoundMin {function ({items , addItem , deleteItem })}


  - called when the minimum bound has been reached. Callback should include one
    argument for object:

{items, addItem, deleteItem} where items

 is the
    set of items which triggered the bounding error  
-

onBoundMax {function ({items , addItem , deleteItem })}


  - called when the maximum bound has been exceeded. Callback should include one
    argument for object:

{items, addItem, deleteItem} where items

 is the
    set of items which triggered the bounding error  
-

onChange {function (items )}


  - called whenever an item is added or removed from the set. Receives one argument
    for

items

 which reflects the latest state
-

onAdd {function (items )}


  - called whenever an item is added to the set. Receives one argument for

items

 which reflects the latest state
-

onDelete {function (items )}


  - called whenever an item is removed from the set. Receives one argument for

items

 which reflects the latest state
Render Props

#### Methods
-

addItem (...items )


  - adds one or several items to the component state
-

deleteItem (...items )


  - deletes one or several items from the component state
-

includes (item )


  - returns

true if @item is included in the component state, otherwise false

setItems (items )


  - sets the component state to his new set of

@items

clearItems ()


  - clears the component state of its items

#### State -items {}- the items currently in the state of the component. Isarray if Itemscomponent is used, andSet if ItemSet`

Items

$3

``yarn add @render-props/items` or `npm i @render-props/items`


Usage

js
import Items, {ItemSet} from '@render-props/items'
const ArrayItems = props => (
  
    {
      ({items, addItem, deleteItem, setItems, clearItems, includes}) => (
        

          
            
              Number of items:
            
            
              {items.length}
            
          
          
 {
            e.preventDefault()
            const field = document.getElementById('item1')
            addItem(field.value)
            field.value = ''
          }}>
            
          
          {items.map(item => (
                          key={item}
              onClick={() => deleteItem(item)}
            >
              Delete '{item}'
            
          ))}
          
        

      )
    }
  
)
const SetItems = props => (
      function ({items, addItem, deleteItem}) {
      const arrItems = Array.from(items)
      deleteItem(arrItems.shift())
      addItem(arrItems.pop())
    }
  }>
    {
      ({items, addItem, deleteItem, setItems, clearItems, includes}) => (
        

          
            
              Number of items:
            
            
              {items.size}
            
          
          
 {
            e.preventDefault()
            const field = document.getElementById('item2')
            addItem(field.value)
            field.value = ''
          }}>
            
          
          {
            Array.from(items).map(item => (
                              key={item}
                onClick={() => deleteItem(item)}
              >
                Delete '{item}'
              
            ))}
          
        

      )
    }
  
)


____
Props

-

initialItems {array|set}


  - the initial state of

items

 in the component
-

minItems {integer}


  - the minimum number of

items

 that should be in the state
-

maxItems {integer}


  - the maximum number of

items

 that can be added to the state
-

onBoundMin {function ({items , addItem , deleteItem })}


  - called when the minimum bound has been reached. Callback should include one
    argument for object:

{items, addItem, deleteItem} where items

 is the
    set of items which triggered the bounding error  
-

onBoundMax {function ({items , addItem , deleteItem })}


  - called when the maximum bound has been exceeded. Callback should include one
    argument for object:

{items, addItem, deleteItem} where items

 is the
    set of items which triggered the bounding error  
-

onChange {function (items )}


  - called whenever an item is added or removed from the set. Receives one argument
    for

items

 which reflects the latest state
-

onAdd {function (items )}


  - called whenever an item is added to the set. Receives one argument for

items

 which reflects the latest state
-

onDelete {function (items )}


  - called whenever an item is removed from the set. Receives one argument for

items

 which reflects the latest state
Render Props

#### Methods
-

addItem (...items )


  - adds one or several items to the component state
-

deleteItem (...items )


  - deletes one or several items from the component state
-

includes (item )


  - returns

true if @item is included in the component state, otherwise false

setItems (items )


  - sets the component state to his new set of

@items

clearItems ()


  - clears the component state of its items

#### State -items {}- the items currently in the state of the component. Isarray if Itemscomponent is used, andSet if ItemSet`