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

    Install

    npm i react-nested

    DownloadsWeekly Downloads

    1

    Version

    0.0.1

    License

    ISC

    Unpacked Size

    179 kB

    Total Files

    7

    Last publish

    Collaborators

    • onurkerimov