Serialize and reproduce the state of an entire tree of React components.
A few examples where this can be useful:
- Using fixtures to load and test components in multiple supported states
- Extracting the app state when an error occurs in the page and reproducing that exact state later on when debugging
- "Pausing" the app state and resuming it later (nice for games)
Generate a snapshot with the props and state of a component combined, including the state of all nested child components.
var ComponentTree = require('react-component-tree');
myCompany.setProps({public: true});
myCompany.setState({profitable: true});
myCompany.refs.employee54.setState({bored: false});
var snapshot = ComponentTree.serialize(myCompany);The snapshot looks like this:
{
public: true,
state: {
profitable: true,
children: {
employee54: {
bored: false
}
}
},
}Render a component and reproduce a state snapshot by recursively injecting the nested state into the component tree it generates.
var myOtherCompany = ComponentTree.render({
component: CompanyClass,
snapshot: snapshot,
container: document.getElementById('content')
});
console.log(myOtherCompany.props.public); // returns true
console.log(myOtherCompany.state.profitable); // returns true
console.log(myOtherCompany.refs.employee54.state.bored); // returns false