Gathering detailed insights and metrics for react-dom-instance
Gathering detailed insights and metrics for react-dom-instance
Gathering detailed insights and metrics for react-dom-instance
Gathering detailed insights and metrics for react-dom-instance
react-component-instance
Get a React class component instance from its DOM Element
react-dom-enhance
Mount React application instance(s) to CSS selector result(s), pass data-* as props. Fork of react-dom-inject
react-nip
A react fiber node instance parser from DOM node to stateful component node
npm install react-dom-instance
Typescript
Module System
Node Version
NPM Version
73.9
Supply Chain
100
Quality
75.2
Maintenance
100
Vulnerability
100
License
JavaScript (100%)
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
MIT License
12 Stars
20 Commits
1 Forks
2 Watchers
15 Branches
1 Contributors
Updated on Jan 14, 2023
Latest Version
2.0.0
Package Id
react-dom-instance@2.0.0
Unpacked Size
9.07 kB
Size
3.62 kB
File Count
5
NPM Version
6.4.1
Node Version
10.14.2
Cumulative downloads
Total Downloads
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
When using react-dom
's findDOMNode()
we get the HTML node generated by a react component instance.
react-dom-instance
's findInstance()
goes in the opposite direction: from an HTML node, we get the react component instance that generated it.
** Only React v16 and higher is supported**
If we have some component like the following one:
1import * as React from 'react'; 2 3class TestComponent extends React.Component { 4 render(){ 5 return <div id="testNode" data-testid="testNode" /> 6 } 7 sayHello(){ 8 console.log('Hello!'); 9 } 10}
We can call the sayHello
method getting the instance with react-dom-instance
:
1import { findInstance } from 'react-dom-instance'; 2 3const node = document.getElementById('testNode'); 4findInstance( node ).sayHello(); // 'Hello!' in the console
We will only find instances from react's class components, functional components has no instances and
npm install react-dom-instance
findInstance( domNode, {options} )
Given the root domNode
generated by a component, it returns the instance of the component. If can't find any instances linked to the domNode
it returns false
.
Functional components don't have instances, so using findInstance
with one DOM node generated by them will also return false
.
We can pass some options in order to retrieve the wanted instance from the DOM node:
componentName
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.
In those cases we can use componentName
to tell findInstace
what type of component instance we want:
1// These 2 components will be linked to the same DOM node 2class ParentComponet extends React.Component { 3 render() { return <ChildComponent /> } 4} 5 6class ChildComponent extends React.Component { 7 render() { return <div id="sharedNode" /> } 8} 9 10let domNode = document.getElementById('sharedNode'); 11 12// Get the instance of the `ParentComponent` 13findInstance( domNode, {componentName: 'ParentComponent'} ); 14 15// By default, `findInstance` returns the instance of the leaf component 16findInstance( domNode ); // ChildComponent instance
maxIteration
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.
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:
1findInstance( domNode, {componentName: 'MyComponent', maxIterations: 6} );
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.
To make the integration easier, findInstance
accepts the container returned by react testing library and know how to extract the instance linked to it:
1import { render } from '@testing-library/react'; 2import { findInstance } from 'react-dom-instance'; 3 4it('should say hello', () => { 5 // TestComponent from the first example in this readme 6 const { container } = render( <TestComponent /> ); 7 8 findInstance( container ).sayHello(); 9});
We can also use the query methods to get instances from components down in the react tree:
1it('should say hello', () => { 2 // App component render TestComponent at some point 3 const { queryByTestId } = render( <App /> ); 4 5 findInstance( queryByTestId('testNode') ).sayHello(); 6});
Here's the changelog MIT Licensed
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
license file detected
Details
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
Found 0/19 approved changesets -- score normalized to 0
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
Reason
project is not fuzzed
Details
Reason
branch protection not enabled on development/release branches
Details
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
Reason
32 existing vulnerabilities detected
Details
Score
Last Scanned on 2025-07-07
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More