react-fiber-traverse

Traverse and other utils on top of React fiber tree

Basic Usage

import { render } from 'react-dom'

import { findNodeByComponentName } from 'react-fiber-traverse'
import { getRootFiberNodeFromDOM } from 'react-fiber-traverse/utils'

const rootElement = document.getElementById('root');
render(<App>, 'root');

const rootFiberNode = getRootFiberNodeFromDOM(rootElement);

const someFiberNode = findNodeByComponentName(rootFiberNode, 'SomeComponentName'); // <- returns FiberNode for first usage of 'SomeComponentName'
// Say, if SomeComponentName renders (<div>Some text</div>)
someFiberNode.stateNode // <- returns reference to the div
someFiberNode.stateNode.innerText // <- returns 'Some text'

Live Examples

• Basic Usage
• API Example
• UMD Build (Development)
• UMD Build (Production)

API

Props

• foo - Something something.
• bar - Optional Something something. Defaults to null.

Example

Installation

$ npm install react-fiber-traverse --save

There are also UMD builds available via unpkg:

• https://unpkg.com/react-fiber-traverse/dist/react-fiber-traverse.umd.development.js
• https://unpkg.com/react-fiber-traverse/dist/react-fiber-traverse.umd.production.js

For the non-minified development version, make sure you have already included:

• React
• ReactDOM

For the minified production version, make sure you have already included:

• React
• ReactDOM

License

MIT