Creating an external wrapper to am npm component not written for react

React.ExternalComponentWrapper.js

//implements API, looks like a regular R component
//just displays data as JSON
//uses JSON-Formatter.js https://github.com/mohsen1/json-formatter-js

//bundler must have acess to node_modules/dist/bundle.js
//bind in HTML via <script)

//JSONViewer.js
export class JSONViewer extends React.Component {
  
  consrtuctor(props){
    super(props)
  }
  //one prop required pnly
  static get defaultProps(){
    return {
      data: {}
    }
  }
  
  componentDidMount(){ 
    //process as shown in DOCS...new formatter object with data, render object
    //last line appends child to DOM
    //DOM accessed via ref attribute. this.refs.viewer 
    const formatter = new JSONFormatter(this.props.data);
    this._child = formatter.render();
    this.refs.viewer.appendChild(this._child)
  }
  
  //component must respond to updates
  componentDidUpdate(prevProps, prevState){
    if (this.props.data !== prevProps.data){
       const formatter = new JSONFormatter(this.props.data);
       const newChild = formatter.render()
       this.refs.viewer.replaceChild(newCHild, this._child)
       this._child = newChild;
    }
    
    render(){
      return (
        ...
          <div ref="viewer"></div>
        )
    }
     
    
    
    //App.js
    import {JSONViewer} from './JSONViewer';
    
    render(){
      
      <JSONViewer date={this.state.products} />