Mutate(Change) React props, for each element in tree, and replace children.
In React, you cannot change this.props
of any component,
but in case you want to?
npm install react-change-props -S
# or
yarn add react-change-props
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.
React only put Object.freeze
when process.env.NODE_ENV==='development'
, this lib will account the case of development
and production
.