Provider factory for ES6 `Map` instances to be shared across multiple React components.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
src
test
.babelrc
.gitignore
.npmignore
.travis.yml
LICENSE
README.md
package-lock.json
package.json
webpack.config.base.js
webpack.config.development.js
webpack.config.production.js

README.md

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

provide-map

build status npm version npm downloads

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

Table of contents

  1. Installation
  2. Usage
  3. Condensed example (defaults)
  1. 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.

Custom actions

  • setMap -> setGoodMap
  • updateMap -> updateGoodMap
  • filterMap -> filterGoodMap
  • clearMap -> clearGoodMap
  • mergeMap -> mergeGoodMap
  • setItem -> setGoodItem
  • updateItem -> updateGoodItem
  • deleteItem -> deleteGoodItem

Custom reducers

  • map -> goodMap
  • mapSize -> goodMapSize
  • item -> goodItem
  • hasItem -> hasGoodItem