How to initialize a script on render in React?

Question

JavaScript

I connect the " Peppermint " library to the react project in index.html, it does not work via import in the component, the library is in the nodes. The problem is to initialize the script inside the component on render. That is, now everything works during the initial rendering of the DOM. If rendering of other components (switching between pages, etc.) stops working, you need to reload the DOM.

import React from 'react';
import c from './Category.module.css';
import Peppermint from '@seangenabe/peppermint';
 // При вызове из компоненты пишет: 'Peppermint' is defined but never used  no-unused-vars, но не знаю как сделать инициализацию.



const Category = (props) =>{
return(
    <div className={c.category}>

        <div className="peppermint peppermint-inactive" id="peppermint">
            <div className={c.swipe__page}><h2 className={c.title__page}>Filter</h2></div>
            <div className={c.swipe__page}><h2 className={c.title__page}>Category</h2></div>
            <div className={c.swipe__page}><h2 className={c.title__page}>Another Page</h2></div>
        </div>
    </div>

    );
   }
   export default Category;

If you cannot call it as a module, is it possible to somehow call this function inside the component? Initialization via JS

var slider = Peppermint(document.getElementById('peppermint'));

I ran out of ideas, I couldn't find the answer in Google. Help with a solution please.

Answer 1

Use lifecycle methods:
componentDidMount for initialization,
componentDidUpdate for reinitialization,
shouldComponentUpdate to prevent unnecessary redraws.

Answer 2

Obviously, it is initialized with reference to specific DOM elements. The solution is simpler than a steamed turnip, re-initialize with each render.