From ba2e842338ee4eb5cc9f13622a94164c962ee217 Mon Sep 17 00:00:00 2001 From: bendtherules Date: Thu, 29 Aug 2019 17:36:17 +0530 Subject: [PATCH] Readme - Update example with proper working code and CSB link --- README.md | 39 +++++++++++++++++++++++++-------------- 1 file changed, 25 insertions(+), 14 deletions(-) diff --git a/README.md b/README.md index 436c357..a930238 100644 --- a/README.md +++ b/README.md @@ -10,28 +10,39 @@ ## Basic Usage ```ts -import { render } from 'react-dom' +import React from "react"; +import { render } from "react-dom"; -import { findNodeByComponentName, Utils } from 'react-fiber-traverse' +import { findNodeByComponentName, Utils } from "react-fiber-traverse"; -const rootElement = document.getElementById('root'); -render(, 'root'); +// Sample component +// Say, if SomeComponentName looks like this - +function SomeComponentName() { + return
Some text
; +} +// Render component +const rootElement = document.getElementById("root"); +render(, rootElement); + +// Get root node const rootFiberNode = Utils.getRootFiberNodeFromDOM(rootElement); -const someFiberNode = findNodeByComponentName(rootFiberNode, 'SomeComponentName'); // <- returns FiberNode for first usage of 'SomeComponentName' -// Say, if SomeComponentName renders (
Some text
) -someFiberNode.stateNode // <- returns reference to the div -someFiberNode.stateNode.innerText // <- returns 'Some text' +// 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](https://codesandbox.io/) -- [API Example](https://codesandbox.io/) -- [UMD Build (Development)](https://codesandbox.io/) -- [UMD Build (Production)](https://codesandbox.io/) - +- [Basic Usage](https://codesandbox.io/s/react-example-x82zk?expanddevtools=1&fontsize=14) + ## Installation