# react-fiber-traverse

[![npm version][npmv-image]][npmv-url]
[![build status][travis-image]][travis-url]
[![coverage status][codecov-image]][codecov-url]
[![npm downloads][npmd-image]][npmd-url]

> Traverse and other utils on top of React fiber tree

## Basic Usage

```ts
import { render } from 'react-dom'

import { findNodeByComponentName, Utils } from 'react-fiber-traverse'

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

const rootFiberNode = Utils.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](https://codesandbox.io/)
- [API Example](https://codesandbox.io/)
- [UMD Build (Development)](https://codesandbox.io/)
- [UMD Build (Production)](https://codesandbox.io/)

## API

**Props**

- `foo` - Something something.
- `bar` - _Optional_ Something something. Defaults to `null`.

**Example**

```jsx
```

## Installation

```
$ npm install react-fiber-traverse --save
```

There are also UMD builds available via [unpkg](https://unpkg.com/):

- 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`](https://unpkg.com/react/umd/react.development.js)
- [`ReactDOM`](https://unpkg.com/react-dom/umd/react-dom.development.js)

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

- [`React`](https://unpkg.com/react/umd/react.production.min.js)
- [`ReactDOM`](https://unpkg.com/react-dom/umd/react-dom.production.min.js)

## License

MIT

[travis-image]: https://img.shields.io/travis/bendtherules/react-fiber-traverse/master.svg?style=flat-square
[travis-url]: https://travis-ci.org/bendtherules/react-fiber-traverse
[codecov-image]: https://img.shields.io/codecov/c/github/bendtherules/react-fiber-traverse.svg?style=flat-square
[codecov-url]: https://codecov.io/gh/bendtherules/react-fiber-traverse
[npmv-image]: https://img.shields.io/npm/v/react-fiber-traverse.svg?style=flat-square
[npmv-url]: https://www.npmjs.com/package/react-fiber-traverse
[npmd-image]: https://img.shields.io/npm/dm/react-fiber-traverse.svg?style=flat-square
[npmd-url]: https://www.npmjs.com/package/react-fiber-traverse