react-prop-extender v0.3.0
react-extend-props-component
Wrapper for re-usable components that allows for easy customization
To use: npm install react-prop-extender
This library exports several utility methods, and a component wrapper that combines their functionality.
createPropAssignmentMap ({} props, [] arrayOfNames) => { return {} mappingOfPropsByStartsWithName
e.g. { itemClassName } => { item: { className } }
any prop that matches none of the names is put on a $main key
e.g. { style, itemClassName } => { item: { className }, $main: { style } } }
childrenProps( string name, {} props ) => { return {} allPropsStartingWithName
same as createPropAssignmentMap(props, name).name }
getNames( React.Children children ) => { returns [] arrayOfNames
based on displayName (or type for basic DOM nodes) of children (recursively) }
customRender( React.Element Element, {} params ) => { returns React.Element CustomElement
Used to swap out an element @params: { mergeProps: props to be merged using a provided or default merge method mergeMethod: (defaultProps, mergeProps) => combinedProps }
Default merge method extends style, calls both event handlers if both original and merge props contain one. }
extendChildren( {} props, React.Children children, propAssignmentMap ) => { returns React.Children mutatedChildren }
Use PropExtender like:
const { children, ...props } = this.props
<PropExtender {...props}>
Accepts props, automatically generates names based on displayName / DOM node type (and string ref, if provided) of children, extends props, and does customRender on all.