CODEWITHSUNDEEP
javascripthtmlreactjsdom
Inderjeet
Inderjeet

Reputation: 91

How to get a react component tree just like it is shown in react dev tools?

I want to get the tree of my rendered React Components as I have a scenario where I have to convert the React Components to an object to store it as it is.

Please see below for the example of React tree Structure.

React tree structure as in React Dev Tools enter image description here

Upvotes: 8

Views: 4039

Answers (1)

Teneff
Teneff

Reputation: 32158

You can take a look at React Test Renderer.

provides a React renderer that can be used to render React components to pure JavaScript objects, without depending on the DOM or a native mobile environment.

and then create a JSON reepresentation of your tree

const instance = TestRenderer.create(<MyComponent />);
instance.toJSON();

Upvotes: 2

Related Questions