I have added Intro.js as below in one of my ponents:

import introJs from 'intro.js';

Then called it in ponentDidMount

    ponentDidMount() {
    introJs().start();
}

Element where I am using it at:

 <div className={cx('dropDownSortingBlock')}>
                {!isTrending && <div className={cx('dropDown')} data-intro={'Hello step one!'}>

However when i import css into a parent ponent

It doesn't render the ponent.

Update:

I tried using intro.js react wrapper and i have imported css directly into my file now.

However it just doesn't work

 constructor() {
        super();

        this.state = {
            showMessage: false,
            type: '',
            message: '',
            stepsEnabled: true,
            initialStep: 0,
            steps: [
                {
                    element: '.snapshotWrapper',
                    intro: 'Hello step',
                },
                {
                    element: '.snapshotWrapperNew',
                    intro: 'Hello Sort wrapper',
                },
            ],
        };
    }

In render

  <Steps
            enabled={this.state.stepsEnabled}
            steps={this.state.steps}
            initialStep={this.state.initialStep}
            onExit={this.onExit}
                    />

Below is what shows up:

I have added Intro.js as below in one of my ponents:

import introJs from 'intro.js';

Then called it in ponentDidMount

    ponentDidMount() {
    introJs().start();
}

Element where I am using it at:

 <div className={cx('dropDownSortingBlock')}>
                {!isTrending && <div className={cx('dropDown')} data-intro={'Hello step one!'}>

However when i import css into a parent ponent

It doesn't render the ponent.

Update:

I tried using intro.js react wrapper and i have imported css directly into my file now.

However it just doesn't work

 constructor() {
        super();

        this.state = {
            showMessage: false,
            type: '',
            message: '',
            stepsEnabled: true,
            initialStep: 0,
            steps: [
                {
                    element: '.snapshotWrapper',
                    intro: 'Hello step',
                },
                {
                    element: '.snapshotWrapperNew',
                    intro: 'Hello Sort wrapper',
                },
            ],
        };
    }

In render

  <Steps
            enabled={this.state.stepsEnabled}
            steps={this.state.steps}
            initialStep={this.state.initialStep}
            onExit={this.onExit}
                    />

Below is what shows up:

• javascript
• reactjs
• intro.js

• By doesn't render you mean the ponent is not present in DOM at all, or you simply can't see it? – Adam Kosmala Commented Aug 6, 2019 at 12:11
• The ponent is present @AdamKosmala the css isn't getting applied – vini Commented Aug 6, 2019 at 12:36
• I would verify if ListLandingPage.css is loaded at all anywhere and if the imported files are available in your css bundle. I'm not familiar with introJs, but maybe try also replacing your import with import * as introJs from 'intro.js' – Adam Kosmala Commented Aug 6, 2019 at 12:40
• @vini Please raise this on their github – Pawan Gangwani Commented Aug 6, 2019 at 15:47
• @vini I'm presuming you're using webpack? If so what's your config? – Riddell Commented Aug 14, 2019 at 14:15

3 Answers 3

Because you're importing the css file from the package in node_modules , Add the ~ to your import in ListLandingPage.css :

@import "~intro.js/introjs.css";

see Import CSS from "node_modules" in Webpack

Or, import it in your ponent ( without the ~ ) :

import introJs from 'intro.js';
import 'intro.js/introjs.css'; 

Howerver, I would suggest you use the React wrapper around Intro.js for a React app.

they even have a code sandbox to get started

Please use react wrapper for intro.js.

1. npm install intro.js-react
2. also install intro js -- > npm install intro.js --save
3. then you can import css files from node modules like this below import "intro.js/introjs.css" themes are also available on the themes folder.(for eg: import "intro.js/themes/introjs- nassim.css";)
4. Wrapper works similarly. Define steps / hints inside ponent. for that :- import { Steps, Hints } from "intro.js-react";

Did you try https://www.npmjs./package/intro.js-react . It is a small React wrapper around Intro.js. The wrapper provides support for both steps and hints