javascript - Using MetricsGraphics.js with ReactJS -

i'm trying use graphing library metricsgraphs.js react.js. many graphing libraries, metricsgraphics works directly mutating dom. unfortunately, doesn't play reactjs. i've tried bunch of different strategies, don't seem able past fact metricsgraphs.js needs direct access dom element can mutate. have overlooked anything, or there no way use metricsgraphics.js react without serious modifications library?

you can use ref property of component access dom elements in react.

these refs (references) useful when need to: find dom markup rendered component (for instance, position absolutely), use react components in larger non-react application, or transition existing codebase react.

you can read more refs in react refs documentation

here example works in projects today.

import react, { component } 'react';  import mg 'metrics-graphics'; import './node_modules/metrics-graphics/dist/metricsgraphics.css'; // path css of metricsgraphics  class graph extends component {   componentdidmount() {     mg.data_graphic({       title: "line chart",       description: "this simple line chart.",       data: data,       width: 600,       height: 200,       right: 40,       target: this.target,       x_accessor: 'date',       y_accessor: 'value'     });   }    render() {     return <div ref={(ref) => this.target = ref}></div>;   } }  export default graph; 

update had update ref callback instead of string keep things simpler , keep working in future due few notes in documentation:

a note cautions section

if want preserve google closure compiler crushing resilience, make sure never access property specified string. means must access using this.refs['myrefstring'] if ref defined ref="myrefstring".

a note ref string attribute section

although string refs not deprecated, considered legacy, , deprecated @ point in future. callback refs preferred.