how to use other js plugin in react?

Question

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!

Adeel Imran · Accepted Answer · 2018-10-04 06:29:36Z

1

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.

answered Oct 4, 2018 at 6:29

Adeel Imran

14.1k8 gold badges66 silver badges80 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Root · Accepted Answer · 2018-10-04 06:36:47Z

1

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

answered Oct 4, 2018 at 6:36

Root

2,3611 gold badge13 silver badges14 bronze badges

Collectives™ on Stack Overflow

how to use other js plugin in react?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related