Skip to content

Latest commit

 

History

History
122 lines (81 loc) · 3.76 KB

README.md

File metadata and controls

122 lines (81 loc) · 3.76 KB
Raw

react-fiber-traverse

npm version build status coverage status npm downloads

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

Installation

$ npm install react-fiber-traverse --save

There are also UMD builds available via unpkg:

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

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

Overview

This package contains few utility functions which operate over react-fiber tree.

Overall characteristics are:

  1. Only read-only operations
  2. Support inversion of control

There are few categories of helpers, each with their variations:

  1. Find node(s)
  2. Traverse node
  3. Others - Check node type, find root node, etc.

Little more info is present in docs section.

Concerns and improvements

Currently, it assumes that nodes are created by react 16.3+ with appropriate react-dom.

Because fiber nodes are internal to react and are supported by multiple renderers, this is an incorrect assumption to make. It should:

  1. support diff versions of react (which have fiber node, but slight variations of it)
  2. be renderer-agnostic (say, support react-fs-renderer) but with extra helpers for react-dom.
  3. heavily tested with all these variations (to know when internals have changed).

Docs

Docs are sparse at the moment. I plan on adding them soon.

Till then, the auto-generated (typedoc) docs available in docs folder might be of some help.

License

MIT