CODEWITHSUNDEEP
javascriptreactjsnext.js
York Wang
York Wang

Reputation: 1977

how to use other js plugin in react?

I've encountered an issue recently where I want to use a 3rd party plugin in my nextjs practice project. Please note that I'm a React beginner, therefore, I'm having a hard time wrapping my mind around the 'react way' of doing things.

My problem is that I do not know how to properly initialize/configure a plugin in a project.

For example, I want to use this smoothscroll js plugin. The regular static site approach is to add a script tag in the html files, and then initialize it by calling the plugin. eg:

<script type="text/javascript">
new GambitSmoothScroll({
    amount: 150, // The scroll amount
    speed: 900 // The scroll speed
});
</script>

But in react, this approach does not work because of the virtual DOM. Any pointers would be greatly appreciated!

Upvotes: 0

Views: 61

Answers (2)

Root
Root

Reputation: 2361

Usually we use npm or yarn in React to manage package.I this particular 3rd party,I recommend you read this website smoothscroll you can run this in your terminal to add it.

npm install --save smoothscroll

Upvotes: 1

Adeel Imran
Adeel Imran

Reputation: 13966

Instead of writing this in your script tag, in your app.js, where you main app is being initialized. In it's componentDidMount hook add this.

componentDidMount () {
  new GambitSmoothScroll({
    amount: 150, // The scroll amount
    speed: 900 // The scroll speed
  });
}

I am using here, that you include 'GambitSmoothScroll` at the top of your code. In order for this to use.

Upvotes: 1

Related Questions