Implementing JS library in React.js-CodePudding

I am using a javascript library called nextparticle. I am trying to implement it in React.js. I looked everywhere and tried all options but I can't get it to work. I tried this.

import React, {Component } from 'react'
import { NextParticle } from '../nextparticle';
import {Helmet} from "react-helmet";

    const Background = () => (
    <div>
        <Helmet>
            <script src="../nextparticle.js" type="text/javascript" />
        </Helmet>
        <NextParticle />
        </div>
  
);

This is the error I got

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

I also tried import NextParticle from '../nextparticle'; Also doesn't work. I've tried for days now. I should pass special params for this to work. Any params I try to put doesn't do anything. This is how it should look like

   <img
  id="logo"
  src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/23500/nextparticle.png"
/>

    <script src="https://nextparticle.nextco.de/nextparticle.min.js"></script>
    <script>
      nextParticle = new NextParticle({
  image: document.all.logo,
  addTimestamp: true,
  width: window.innerWidth,
  height: window.innerHeight,
  initPosition: 'none',
  initDirection: 'none',
});
      });
      window.onresize = function () {
        if (window.innerWidth > 600) {
          nextParticle.width = window.innerWidth - 20;
          nextParticle.height = window.innerHeight - 20;
          nextParticle.start();
        }
      };
    </script>

I also added this in my index.html

<script src="/nextparticle.min.js"></script>

Again, no results. this is the documentation for the library Any Help is appreciated, thank you.

CodePudding user response：

I geuss you have to export your background component, as that is what the error is mentioning.

import React, {Component } from 'react'
import { NextParticle } from 'nextparticle';
import {Helmet} from "react-helmet";

export const Background = () => (
  <div>
    <Helmet>
        <script src="../nextparticle.js" type="text/javascript" />
    </Helmet>
    <NextParticle />
    </div>
  );

And if you want to import a third-party script in React import it directly in your index.html instead. Usually in the public directory. Unless you really need Helmet.