react-change-props

react-change-props

Mutate(Change) React props, for each element in tree, and replace children.

Why?

In React, you cannot change this.props of any component, but in case you want to?

Install

npm install react-change-props -S
# or
yarn add react-change-props

Usage

import React from 'react'
import changeProps from 'react-change-props'

const replacer = str => (str && {className: 'my-prefix-' + str})
const newThing = changeProps(
  <div className="a"><p className="b"><span>text</span></p></div>,
  el => replacer(el.props.className)
)

The newThing will be:

<div className="my-prefix-a"><p className="my-prefix-b"><span>text</span></p></div>

The API is easy:

// changeProps(JSX, [replacer])
var newJSX = changeProps(JSX, el => new_props_for_this_el)

If you return { children: <Foo/> } from above replacer, the children elements will be replaced.

The return value of replacer will be passed into Object.assign({}, return_value), so if you return Non-Object, nothing happend.

Notes

React only put Object.freeze when process.env.NODE_ENV==='development', this lib will account the case of development and production.