react-props-filter v1.0.0

react-props-filter

Filter miscellaneous props and get props precisely.

💻 Install

$ npm i react-props-filter

🕹 Usage

import React from 'react';
import PropTypes from 'prop-types';
import filter from 'react-props-filter';

const Hulk = ({ hulkName }) => <p>{`I'm ${hulkName}`}</p>;

Hulk.propTypes = {
  hulkName: PropTypes.string.isRequired,
};

const Thor = ({ thorName }) => <p>{`My name is ${thorName}`}</p>;

Thor.propTypes = {
  thorName: PropTypes.string.isRequired,
};

const Avengers = filter({
  hulk: {
    requiredProps: Object.keys(Hulk.propTypes),
  },
  thor: {
    requiredProps: Object.keys(Thor.propTypes),
  },
});

const App = () => (
  <Avengers
    ironManName="Tony Stark"
    captainAmericaName="Steve Rogers"
    hulkName="Bruce Banner"
    thorName="Thor Odinson"
  >
    {({ hulk, thor, allProps }) => (
      <div>
        <Hulk {...hulk} />
        <Thor {...thor} />
        /*
          hulk === { hulkName: "Bruce Banner" }
          thor === { thorName: "Thor Odinson" }
          allProps === {
            ironManName: 'Tony Stark',
            captainAmericaName: 'Steve Rogers',
            hulkName: 'Bruce Banner',
            thorName: 'Thor Odinson'
          }
        */
      </div>
    )}
  </Avengers>
);

💡 Features

• Pretty simple. Get props declaratively.
• Render props.

🛠 How to Use

filter: Function(settings) => Component

The main method to create Filter component.

settings: Object

This contains several groups, and each group will be injected into render props.

Notice: all original props will be stored in the prop named allProps.

For example

const Filter = filter({
  groupA: { ...propsGroupSettingsA },
  groupB: { ...propsGroupSettingsB },
});

const App = props => (
  <Filter { ...props }>
    {({ groupA, groupB, allProps }) => (/* ... */) }
  </Filter>
)

Group: Object

Declare what props does Component need. It has the following keys.

• requiredProps
• mapProps
• options

requiredProps: [String]

List which props are required in this group. It's suggested to be Object.keys(Component.propTypes).

mapProps: Function(props) => Object

A function which lets you map the original props into a single object. All changes will be kept in group scope.

options: Object

Example for detailed settings

const Filter = filter({
  groupA: {
    requiredProps: ['propAAA', 'propBBB', 'onClick'],
    mapProps: props => ({
      ...props,
      propAAA: props.propA,
      propBBB: `${props.propB} !`,
    }),
    options: {
      DOMProps: true,
    }
  },
});

const App = () => (
  <Filter propA="A" propB="B" onClick={console.log}>
    {({groupA}) => (/* ... */)
    /*
      groupA === {
        propAAA: 'A',
        propBBB: 'B !',
        onClick=console.log
      }
    */
  }
  </Filter>
)

License

MIT © xxhomey19