mirror of
https://github.com/bendtherules/react-fiber-traverse.git
synced 2026-08-18 13:52:36 +00:00
Add basic usage to readme
This commit is contained in:
@@ -9,11 +9,21 @@
|
|||||||
|
|
||||||
## Basic Usage
|
## Basic Usage
|
||||||
|
|
||||||
```jsx
|
```ts
|
||||||
import React from 'react'
|
|
||||||
import { render } from 'react-dom'
|
import { render } from 'react-dom'
|
||||||
|
|
||||||
render(, document.getElementById('root'))
|
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
|
## Live Examples
|
||||||
@@ -50,7 +60,6 @@ For the non-minified development version, make sure you have already included:
|
|||||||
|
|
||||||
- [`React`](https://unpkg.com/react/umd/react.development.js)
|
- [`React`](https://unpkg.com/react/umd/react.development.js)
|
||||||
- [`ReactDOM`](https://unpkg.com/react-dom/umd/react-dom.development.js)
|
- [`ReactDOM`](https://unpkg.com/react-dom/umd/react-dom.development.js)
|
||||||
- [`PropTypes`](https://unpkg.com/prop-types/prop-types.js)
|
|
||||||
|
|
||||||
For the minified production version, make sure you have already included:
|
For the minified production version, make sure you have already included:
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user