https://github.com/jossmac/react-node-resolver

🔍 Resolve the DOM node of any react component
https://github.com/jossmac/react-node-resolver

dom element node react resolver

Last synced: 3 months ago
JSON representation

🔍 Resolve the DOM node of any react component

• Host: GitHub
• URL: https://github.com/jossmac/react-node-resolver
• Owner: jossmac
• License: mit
• Created: 2018-02-09T21:28:08.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2022-12-07T09:43:59.000Z (about 2 years ago)
• Last Synced: 2024-10-28T00:33:51.385Z (3 months ago)
• Topics: dom, element, node, react, resolver
• Language: JavaScript
• Homepage:
• Size: 706 KB
• Stars: 12
• Watchers: 4
• Forks: 2
• Open Issues: 12
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# React Node Resolver

A generic technique for resolving the DOM node of any react component.

[![Build Status](https://travis-ci.org/jossmac/react-node-resolver.svg?branch=master)](https://travis-ci.org/jossmac/react-node-resolver)

### Alternative Solutions

Since creating this utility, more robust solutions have become available. Consider the following before using this package:

- [React.forwardRef()](https://reactjs.org/docs/forwarding-refs.html)

- [The render props pattern](https://reactjs.org/docs/render-props.html)

### Install

```bash

yarn add react-node-resolver

```

### Use

```jsx

import NodeResolver from 'react-node-resolver';

class ObfuscatedComponent extends Component {

  render() {

    return 
;

  }

}


class GroovyThing extends Component {

  getNode = (ref) => {

    console.log(ref); // 


  }

  render () {

    return (

      

        

      

    );

  }

}

```


### Props

| Property         | Type         | Description |

| ---------------- | ------------ | ----------- |

| `children`       | `Element`    | A single react Component |

| `innerRef`       | `ElementRef` | Callback ref `ref => this.node = ref` |