如何将外部库RainyDay.js添加到我的项目中？

Question

So I'm quite new with React, I just create a project, define a background image and I was wondering how could I use the library https://mubaidr.js.org/rainyday.js/ ? How to add it and what are the good pratice when it comes to add external library in react.

Thanks in advance !

Answer 1

This project is not available on npm, so you can't install it like you are used to with other modules. You can include it in a script tag, or copy the source to your own project and include it that way.

To use it you can put a ref on your image, and create the RainyDay object with the image as the image option in the componentDidMount lifecycle hook.

Example

class App extends React.Component {
  ref = React.createRef();

  componentDidMount() {
    const image = this.ref.current;

    image.onload = function() {
      new RainyDay({
        image
      });
    };

    image.crossOrigin = "anonymous";
    image.src = "https://picsum.photos/200";
  }

  render() {
    return <img ref={this.ref} src="" />;
  }
}