Provide-map NPM

Feel free to submit any pull requests or create issues for anything you think might be useful!

provide-map

Provider factory for ES6 Map instances to be shared across multiple React components.

Condensed example (custom)

Installation

npm install provide-map --save

Usage

Use provide-map to create providers with predictably named actions and reducers specific to manipulating ES6 Map instances. Create as many providers/instances as you want and share them across multiple components.

The main export provideMap takes 3 arguments:

mapName

defaults to 'map'

itemName

defaults to 'item'

indexName

defaults to 'index'

Condensed example (defaults)

import { render } from 'react-dom';
import provideMap from 'provide-map';
import { GoodStuff } from './components/index';

const map = provideMap();

const defaultProps = {
  providers: {
    map: {
      ...map,
      state: {
        map: new Map([
          ['a', { fruit: 'apple' }],
          ['b', { fruit: 'banana' }],
          ['c', { vegetable: 'carrot' }]
        ])
      }
    }
  }
};

render(<GoodStuff { ...defaultProps } />, document.getElementById('root'));

Components can then use the following default actions and reducers via propTypes.

Default actions

setMap (Object map) - sets the map
updateMap (Function update) - updates each key-value pair
filterMap (Function filter) - filters each key-value pair
clearMap () - clears the map
mergeMap (Object map) - update or add new items to the map (shallow merge)
setItem (Mixed index, Mixed item) - sets the item at some index (note: we're referring to the key as index because this.props.key is reserved for React internally)
updateItem (Mixed index, Mixed item) - updates or sets the item at some index; if the existing item the update are both objects, it will merge the two as a new object
deleteItem (Mixed index) - deletes the item at some index

Default reducers

map - the map instance, of course
mapSize - the size of the map instance
item - if the component instance contains a prop key matching the indexName (e.g., index), the item at that key within the map will be provided
hasItem - if the component instance contains a prop key matching the indexName (e.g., index), the existence of the item at that key within the map will be provided as a boolean value

Condensed example (custom)

import { render } from 'react-dom';
import provideMap from 'provide-map';
import { GoodStuff } from './components/index';

const goodMap = provideMap('goodMap', 'goodItem', 'goodIndex');

const defaultProps = {
  providers: {
    goodMap: {
      ...goodMap,
      state: {
        goodMap: new Map([
          ['a', { fruit: 'apple' }],
          ['b', { fruit: 'banana' }],
          ['c', { vegetable: 'carrot' }]
        ])
      }
    }
  }
};

render(<GoodStuff { ...defaultProps } />, document.getElementById('root'));

Components can then use the following custom actions and reducers via propTypes.