React Component for Tippy.js

index.jsx

import React from 'react'
import ReactDOM from 'react-dom'
import Tippy from './ReactTippy'

class App extends React.Component {
  state = { color: 'pink' }

  render() {
    return (
      <div>
        <Tippy duration={200} delay={50} arrow={true} animation="scale">
          <button title="My title tooltip">Button text</button>
        </Tippy>
        <Tippy
          html={
            <span style={{ color: this.state.color }}>
              My HTML stateful tooltip
            </span>
          }
          hideOnClick={false}
        >
          <button onClick={() => this.setState({ color: 'cyan' })}>
            Button text
          </button>
        </Tippy>
      </div>
    )
  }
}

ReactDOM.render(<App />, document.getElementById('root'))

ReactTippy.jsx

import React from 'react'
import ReactDOM from 'react-dom'
import tippy from 'tippy.js'

class Tippy extends React.Component {
  html = React.createRef()

  componentDidMount() {
    const { children, ...props } = this.props
    this.tippyInstance = tippy.one(ReactDOM.findDOMNode(this), {
      ...props,
      html: this.html.current
    })
  }

  componentDidUpdate() {
    if (!this.props.html) {
      this.tippyInstance.popper.querySelector('.tippy-content')[
        this.props.allowTitleHTML ? 'innerHTML' : 'textContent'
      ] = this.props.children.props.title
    }
  }

  componentWillUnmount() {
    if (this.tippyInstance) {
      this.tippyInstance.destroy()
      this.tippyInstance = null
    }
  }

  render() {
    return (
      <React.Fragment>
        {this.props.children}
        {this.props.html && <div ref={this.html}>{this.props.html}</div>}
      </React.Fragment>
    )
  }
}

export default Tippy

In componentDidMount.
Where do you use children?

about ReactDOM.findDOMNode(this)
Do not use findDOMNodeeslint(react/no-find-dom-node)