react-fiber-traverse
Traverse and other utils on top of React fiber tree
Basic Usage
;; ; // Sample component// Say, if SomeComponentName looks like this - // Render component;renderSomeComponentName /, rootElement; // Get root node; // Get component node; // <- returns FiberNode for first usage of 'SomeComponentName' console.logsomeFiberNode.child.stateNode; // <- returns reference to the divconsole.logsomeFiberNode.child.stateNode.innerText; // <- returns 'Some text'
Live Examples
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:
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:
- Only read-only operations
- Support inversion of control
There are few categories of helpers, each with their variations:
- Find node(s)
- Traverse node
- 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:
- support diff versions of react (which have fiber node, but slight variations of it)
- be renderer-agnostic (say, support react-fs-renderer) but with extra helpers for react-dom.
- 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