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.
Object
settings: 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>
)
Object
Group: 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
Key | Type | Default | Description |
---|---|---|---|
DOMProps | Bool |
false |
Allowed any default DOM props from original props to be included in the group. |
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" propC="C" onClick={console.log}>
{({ groupA }) => (/* ... */)
/*
groupA === {
propAAA: 'A',
propBBB: 'B !',
onClick: console.log
}
*/
}
</Filter>
)
License
MIT Β© xxhomey19