ReactJs How to use leader-line (an external javascript library) in react?

I want to use leader-line in my React web project. It is an external javascript library, but I don't know how to integrate it into the project with the JSX syntax.
For example, its documentation tells us the general implementation:

Html

<div id="start">start</div>
<div id="end">end</div>

Javascript

// Add new leader line from `start` to `end` (HTML/SVG elements, basically).
new LeaderLine(
  document.getElementById('start'),
  document.getElementById('end')
);

How should I write in JSX file?
I try to write below, but failed.

import React, { Component } from 'react';
import LeaderLine from 'leader-line'

class Page extends Component {

  constructor(props) {
    super(props);
  }

  componentDidMount() {
    new LeaderLine(document.getElementById('start'),
                   document.getElementById('end'));
  }

  render() {
    return (
      <div className="Page">
        <div id="start"></div>
        <div id="end"></div>
      </div>
    )
  }
}

export default Page;

This is the npm package page of leader-line.

Answer:1



Background (possibly irrelevent): I have a large react project I'm changing gulp -> webpack. It's isomorphic so I'm using webpack-isomorphic-tools. So I have this line which no longer works: const ...

Background (possibly irrelevent): I have a large react project I'm changing gulp -> webpack. It's isomorphic so I'm using webpack-isomorphic-tools. So I have this line which no longer works: const ...

Is there a way to make the calendar glyphicon open the datetime picker when clicked? I currently just have the button but it can't be clicked. I’ve been struggling to find something that’s specific to ...

Is there a way to make the calendar glyphicon open the datetime picker when clicked? I currently just have the button but it can't be clicked. I’ve been struggling to find something that’s specific to ...