Skip to content
This repository has been archived by the owner on Jun 26, 2020. It is now read-only.

Support hiding components in devtools with Symbol.for('react.devtools.hide') #997

Closed
wants to merge 3 commits into from

Conversation

Jessidhia
Copy link

@Jessidhia Jessidhia commented Mar 9, 2018

This allows places such as HOC factory functions to define a [Symbol.for('react.devtools.hide')] = true property in their generated components in order to support hiding them in the devtools.

The change done to test/example/target.js's wrapWithHoc function for testing is such an example.

image

image

No attempt to make the settings window look nice was made, this is also untested in Fiber but if I understand the code correctly it should work.

Guidance on how to test or how to write tests would be welcome.

@facebook-github-bot
Copy link

Thank you for your pull request and welcome to our community. We require contributors to sign our Contributor License Agreement, and we don't seem to have you on file. In order for us to review and merge your code, please sign up at https://code.facebook.com/cla. If you are contributing on behalf of someone else (eg your employer), the individual CLA may not be sufficient and your employer may need the corporate CLA signed.

If you have received this in error or have any questions, please contact us at cla@fb.com. Thanks!

@facebook-github-bot
Copy link

Thank you for signing our Contributor License Agreement. We can now accept your code for this (and any) Facebook open source project. Thanks!

@Gvozd
Copy link

Gvozd commented Oct 15, 2018

@Kovensky I rebase your PR on current master - at PR #1187
Also I add option for hide components with displayName property

@eps1lon
Copy link

eps1lon commented Dec 4, 2018

So the basic usage is supposed to be:

function Component(props) { ... }
Component[Symbol.for('react.devtools.hide')] = true

Just wanted to add that this can cause trouble if that component is decorated with other HOCs that use the popular hoist-non-react-statics package (used in react-redux, react-router, emotion etc.). It will cause every HOC upwards to be hidden as well because that property will be hoisted.

I would therefore prefer #1076.

@bvaughn
Copy link
Contributor

bvaughn commented Aug 20, 2019

React DevTools has been rewritten and recently launched a new version 4 UI 🎉 The source code for this rewrite was done in a separate repository and is being merged into the main React repo.

Thank you for taking the time to contribute to this extension 🙇‍♂️

Because this PR is for the version code base, I am closing it. If you'd like to contribute to the new extension, please visit the new repository.

@bvaughn bvaughn closed this Aug 20, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants