CODEWITHSUNDEEP
reactjs
Shubham
Shubham

Reputation: 1191

ReactJS component hiding for React developer tools

I know the some of the websites using reactJS for the front-end part but they're using some advance technique to hide the component structuring. So we not able to view the component part using the react developer tool.

example site - facebook site

Can you please let me know what facebook uses to hide the component structuring?

Upvotes: 2

Views: 1751

Answers (2)

Boyardee
Boyardee

Reputation: 324

Usually when I want to hone my view in the Component tree I will go to the View Settings Menu, which is the gear icon located by the search component tree bar in the top left:

View Settings Menu Link

In the View Settings Menu, you can access Component Tree options. One extremely useful feature is the Hide Components Where... filter. You can enter a regex expression if you wish to exclude a lot of noise from the component tree. In the example below, I have entered a regex that hides everything except my component named "ContractForm":

View Settings Menu

That yields the following result in the components pane:

Example

Upvotes: 2

Elumalai Kaliyaperumal
Elumalai Kaliyaperumal

Reputation: 1520

Try using below code in production

<script>
    if (typeof window.__REACT_DEVTOOLS_GLOBAL_HOOK__ === 'object') {
        __REACT_DEVTOOLS_GLOBAL_HOOK__.inject = function() {};
    }
</script>

Refer react-devtools issue here #191

Upvotes: 2

Related Questions