Css not working for intro.js module in React

Question

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

import introJs from 'intro.js';

Then called it in componentDidMount

    componentDidMount() {
    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 component

It doesn't render the component.

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:

By `doesn't render` you mean the component is not present in DOM at all, or you simply can't see it? — Adam Kosmala, Aug 06 '19 at 12:11
The component is present @AdamKosmala the css isn't getting applied — vini, Aug 06 '19 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, Aug 06 '19 at 12:40
@vini I'm presuming you're using webpack? If so what's your config? — Riddell, Aug 14 '19 at 14:15

score 7 · Accepted Answer · edited Aug 15 '19 at 02:55

7

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 component ( 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

edited Aug 15 '19 at 02:55

Blue

22,608
7
62
92

answered Aug 08 '19 at 14:36

Taki

17,320
4
26
47

I tried the React Wrapper It didnt work out same issue will try this thanks. – vini Aug 09 '19 at 01:50
am getting module loader failed – vini Aug 09 '19 at 02:34
when using the `~` or when importing it in the component (without the `~`)? – Taki Aug 13 '19 at 18:17

score 1 · Answer 2 · answered Feb 09 '21 at 09:40

Please use react wrapper for intro.js.

npm install intro.js-react
also install intro js -- > npm install intro.js --save
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";)
Wrapper works similarly. Define steps / hints inside component. for that :- import { Steps, Hints } from "intro.js-react";

score 0 · Answer 3 · answered Aug 13 '19 at 11:10

0

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

answered Aug 13 '19 at 11:10

Vu Luu

792
5
16

Css not working for intro.js module in React

3 Answers3