react-merge-props

Deep props merging functionality for React.

Introduction

Merging react component props by the following rule:

1. Normal props replace the former
2. children are ignored
3. className are concatenated
4. style are shallow merged
5. functions that have initial on are run in sequence from left to right

When creating extensible react components, this is what we need.

The first argument is mutated for performance reason. If you don't want this behavior, please pass the first argument as an empty object.

Installation

Install this package with npm.

npm i react-merge-props -s

Usage Pattern

This package is very useful when creating wrapping components. For example:

import React from 'react';
import mergeProps from 'react-merge-props';
 
const HeadingOne = (props) => (
  <h1 {...mergeProps({ style: { 'color': 'red' }}, props)}>{props.children}</h1>
);
 
export default HeadingOne;

License

MIT © Zhang Kai Yu