This package has been deprecated

Author message:

Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

react-nested

0.0.1 • Public • Published

react-nested

This is an experimental plugin. It helps you hide nested parent components while using React DevTools. Exports ReactNested component which has parents prop. Components you specify in this prop will be used as wrappers. What this plugin does under the hood is adding _hidden_ suffix to display names of your components by cloning them.

Usage

Without using react-nested:

import ReactNested from 'react-nested'
 
ReactDOM.render(
  <Alpha prop1={1}>
    <Beta>
      <Gamma prop1={1} prop2={'test'}>
        <Delta>
          <MyComponent />
        </Delta>
      </Gamma>
    </Beta>
  </Alpha>,
  document.getElementById('root')
);

With react-nested:

import ReactNested from 'react-nested'
 
ReactDOM.render(
  <ReactNested
    parents={[
      (props) => <Alpha prop1={1} children={props.children} />,
      (props) => <Beta children={props.children} />,
      (props) => <Gamma prop1={1} prop2={'test'} children={props.children} />,
      (props) => <Delta children={props.children} />,
    ]}
  >
    <MyComponent />
  </ReactNested>,
  document.getElementById('root')
);

There is also one more step: In your React DevTools, by clicking 'Add Filter' in settings, add the following filter: Hide components when 'name' matches '_hidden_'

Comparison

Without this plugin With this plugin With this plugin,
Filter is set on Settings

Dependencies (0)

    Dev Dependencies (0)

      Package Sidebar

      Install

      npm i react-nested

      Weekly Downloads

      0

      Version

      0.0.1

      License

      ISC

      Unpacked Size

      179 kB

      Total Files

      7

      Last publish

      Collaborators

      • onurkerimov