Skip to content

Commit f7037fd

Browse files
committed
Updates readme
1 parent 7865f5b commit f7037fd

File tree

1 file changed

+9
-6
lines changed

1 file changed

+9
-6
lines changed

README.md

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
# react-dom-instance
22
[![npm version](https://badge.fury.io/js/react-dom-instance.svg)](https://badge.fury.io/js/react-dom-instance) [![CircleCI](https://circleci.com/gh/arqex/react-dom-instance.svg?style=shield)](https://circleci.com/gh/arqex/react-dom-instance) [![Codecov Coverage](https://img.shields.io/codecov/c/gh/arqex/react-dom-instance)](https://codecov.io/gh/arqex/react-dom-instance/)
33

4-
When using `react-dom`'s `findDOMNode()` we get the HTML node generated by a react component instance.
4+
When using [`react-dom`](https://es.reactjs.org/docs/react-dom.html#finddomnode)'s `findDOMNode()` we get the HTML node generated by a react component instance.
55

66
`react-dom-instance`'s `findInstance()` goes in the opposite direction: from an HTML node, we get the react component instance that generated it.
77

8-
** Only React v16 and higher is supported**
8+
**Only React v16 and higher is supported**
99

1010
## How it works
1111

@@ -50,7 +50,10 @@ Functional components don't have instances, so using `findInstance` with one DOM
5050

5151
We can pass some options in order to retrieve the wanted instance from the DOM node:
5252

53+
### Options
54+
5355
**componentName**
56+
5457
Sometimes there are more than one component instance linked to a DOM node. For example, when a component `render` method returns another component, or when using higher order components.
5558

5659
In those cases we can use `componentName` to tell `findInstace` what type of component instance we want:
@@ -75,6 +78,7 @@ findInstance( domNode ); // ChildComponent instance
7578
```
7679

7780
**maxIteration**
81+
7882
When there are more than one component linked to the same DOM node, `findInstance` navigates recursively through the react fibers looking for the instance of the right component we want. To make this process fast and avoid infinite loops there is a maximum number of iterations that the algorithm does until it decides that the instance can't be found. By default `findInstance` iterates `4` times looking for the instance and return `false` after not finding it.
7983

8084
If you have a DOM node with a lot of instances linked and know that more iterations are needed to find the one you want, you can pass `maxIteration` as an option with a bigger number:
@@ -85,7 +89,7 @@ findInstance( domNode, {componentName: 'MyComponent', maxIterations: 6} );
8589

8690
## Usage with react testing library
8791

88-
This library was thought as a helper for testing with react testing library: sometimes it is useful to access to the component instances in order to create tests.
92+
This library was thought as a helper for testing with [react testing library](https://github.com/testing-library/react-testing-library): sometimes it is useful to access to the component instances in order to create tests.
8993

9094
To make the integration easier, `findInstance` accepts the container returned by react testing library and know how to extract the instance linked to it:
9195

@@ -112,11 +116,10 @@ it('should say hello', () => {
112116
});
113117
```
114118

115-
116119
---
117120

118-
Here's [the changelog](CHANGELOG.md)
119-
[MIT Licensed](LICENSE)
121+
* Here's [the changelog](CHANGELOG.md)
122+
* [MIT Licensed](LICENSE)
120123

121124

122125

0 commit comments

Comments
 (0)