Deprecated

This package has been merged into the React Cosmosmonorepo.

React Component Tree

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)

React compatibility:

• react-component-tree@0.2 with react@0.13 and below
• react-component-tree@0.4 with react@0.14 and above

ComponentTree.serialize

Generate a snapshot with the props and state of a component combined, including the state of all nested child components.

varComponentTree=require('react-component-tree');myCompany.setProps({public: true});myCompany.setState({profitable: true});myCompany.refs.employee54.setState({bored: false});varsnapshot=ComponentTree.serialize(myCompany);

The snapshot looks like this:

{public: true,state: {profitable: true,children: {employee54: {bored: false}}},}

ComponentTree.render

Render a component and reproduce a state snapshot by recursively injecting the nested state into the component tree it generates.

varmyOtherCompany=ComponentTree.render({component: CompanyClass,snapshot: snapshot,container: document.getElementById('content')});console.log(myOtherCompany.props.public);// returns trueconsole.log(myOtherCompany.state.profitable);// returns trueconsole.log(myOtherCompany.refs.employee54.state.bored);// returns false