react-fiber-traverse

Traverse and other utils on top of React fiber tree

Basic Usage

import React from "react";
import { render } from "react-dom";

import { findNodeByComponentName, Utils } from "react-fiber-traverse";

// Sample component
// Say, if SomeComponentName looks like this -
function SomeComponentName() {
  return <div>Some text</div>;
}

// Render component
const rootElement = document.getElementById("root");
render(<SomeComponentName />, rootElement);

// Get root node
const rootFiberNode = Utils.getRootFiberNodeFromDOM(rootElement);

// Get component node
const someFiberNode = findNodeByComponentName(
  rootFiberNode,
  "SomeComponentName"
); // <- returns FiberNode for first usage of 'SomeComponentName'

console.log(someFiberNode.child.stateNode); // <- returns reference to the div
console.log(someFiberNode.child.stateNode.innerText); // <- returns 'Some text'

Live Examples

• Basic Usage

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