react-props-filter
Filter miscellaneous props and get props precisely.
💻 Install
$ npm i react-props-filter
🕹 Usage
;;; const Hulk = <p>`I'm `</p>; HulkpropTypes = hulkName: PropTypesstringisRequired; const Thor = <p>`My name is `</p>; ThorpropTypes = thorName: PropTypesstringisRequired; const Avengers = ; const App = <Avengers ironManName="Tony Stark" captainAmericaName="Steve Rogers" hulkName="Bruce Banner" thorName="Thor Odinson" > <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 = ; const App = <Filter ...props > /* ... */ </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 = ; const App = <Filter propA="A" propB="B" onClick=consolelog> /* ... */ /* groupA === { propAAA: 'A', propBBB: 'B !', onClick=console.log } */ </Filter>
License
MIT © xxhomey19