CODEWITHSUNDEEP
reactjs
Christopher
Christopher

Reputation: 643

Loading a react dom

I'm new to react. I'm looking to build a chrome extension which manipulates a website written in react. When I use the react developer tools (the chrome extension) I can see the full react dom. But I don't know how to load the react dom in my own code.

So, for a minimum working example. If I go to facebook.com (uses react) and load the react dev tools, I see a bunch of FluxContainer tags which have interesting props (e.g. contextArgs, feebacktarget, etc). But from within the javascript console, I don't know how to (a) get access to this react dom and (b) inspect the props of the tags/components of interest.

Upvotes: 3

Views: 334

Answers (2)

James L
James L

Reputation: 16874

The dev tools register a global hook called __REACT_DEVTOOLS_GLOBAL_HOOK__.

React itself looks to see whether this is present, and if so, calls it from ReactDOM among other places.

Upvotes: 2

Quentin
Quentin

Reputation: 516

I don't know if I really understand your problem but if you want to access to a DOM element of react you can use ReactDom.findDOMNode(this.refs.REFNAME).optionYouWanted

example: 

import ReactDom from 'react-dom';

<Radio name='test' ref='First'>5</Radio>

If I want to manipulate this radio and get the text for example I will do

ReactDom.findDOMNode(this.refs.First).textContent (will return 5);

You need to give a ref attribute to the element you want to get

Upvotes: 0

Related Questions