reactjs - How to use leader-line (an external javascript library) in react? - Stack Overflow

admin管理员组

文章数量:1339481

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);
  }

  ponentDidMount() {
    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.

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);
  }

  ponentDidMount() {
    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.

• javascript
• reactjs
• jsx

Share Improve this question Follow asked May 29, 2018 at 16:53 Echo YangEcho Yang 52011 gold badge66 silver badges1212 bronze badges 1

• 1 Were you able to resolve this? – supra28 Commented Jun 1, 2018 at 4:21

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 6

Depending on what you are trying to achieve with leader-line, you may find that you can achieve it just as well with react-xarrows.

https://www.npmjs./package/react-xarrows

React-xarrows can be integrated into a React app much more easily (even using DOM identifiers rather than React Refs, if you prefer).

See this example code (taken directly from the link above), showing usage.

import React, { useRef } from "react";
import Xarrow from "react-xarrows";
 
const boxStyle = {
  border: "grey solid 2px",
  borderRadius: "10px",
  padding: "5px",
};
 
function SimpleExample() {
  const box1Ref = useRef(null);
  return (
    <div
      style={{ display: "flex", justifyContent: "space-evenly", width: "100%" }}
    >
      <div ref={box1Ref} style={boxStyle}>
        hey
      </div>
      <p id="elem2" style={boxStyle}>
        hey2
      </p>
      <Xarrow
        start={box1Ref} //can be react ref
        end="elem2" //or an id
      />
    </div>
  );
}

I've made a small prototype to illustrate how it could be achieved.

class Line extends React.Component {

  ponentDidMount () {
     this.waitWhenRefIsReady();
    // scroll and resize listeners could be assigned here
  }

  ponentWillUnmount () {
    if(this.timer) {
      clearInterval(this.timer);
    }
  }

  shouldComponentUpdate () {
    setTimeout(() => {
      // skip current even loop and wait
      // the end of parent's render call
      if(this.line) {
        this.line.position();
      }
    }, 0);
    // you should disable react render at all
    return false;
  }

  waitWhenRefIsReady () {
    // refs are generated via mutations - wait for them
    this.timer = setInterval(() => {
      if(this.props.start.current) {
        clearInterval(this.timer);
        this.drawLine();
      }
    }, 5);
  }

  drawLine () {
    const {start, end} = this.props;
    this.line = new LeaderLine(start.current, end.current);
  }

  render () {
    return null;
  }
}

class App extends React.Component {
  constructor (props) {
    super(props);
    this.state = {
      left: 0,
    };

    this.myRef1 = React.createRef();
    this.myRef2 = React.createRef();
  }

  ponentDidMount() {
    this.animateLine();
  }

  animateLine() {
    setInterval(() => {
      const limit = 200;
      const {left} = this.state;
      const x = ((left % limit) + limit) % limit;
      this.setState({left: x + 10});
    }, 1000);
  }

  render () {
    const {left} = this.state;
    const {myRef1, myRef2} = this;

    return <div className="container">
        <Line 
          start={this.myRef1} 
          end={this.myRef2} />
        <div 
          id="start"
          ref={this.myRef1}
          style={{
            left: `${left}px`
          }}></div>
        <div
          id="end"
          ref={this.myRef2}></div>
      </div>
  }
}

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

Leader Line + React JSX simple prototype

import LeaderLine from 'leader-line';

Add in leader-line.min.js (at end)

if (module && module.exports) { module.exports = LeaderLine }

Refer to this thread for how to integrate Leaderline into your react project :

https://github./anseki/leader-line/issues/8#issuement-370147614

in summary, you cant just do import LeaderLine from 'leader-line'; to import LeaderLine, because its not an ES2015 module yet!

similar to how @shilpa pointed out, you can tweak the webpack config to include -

rules: [
{
        test: require('path').resolve(__dirname, 'node_modules/leader-line/'),
        use: [{
          loader: 'skeleton-loader',
          options: {procedure: content => `${content}export default LeaderLine`}
        }]
      }

and then inside ponentDidMount, you could do

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

本文标签： reactjsHow to use leaderline (an external javascript library) in reactStack Overflow