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
– Adam Kosmala, Commented Aug 6, 2019 at 12:11
The component is present @AdamKosmala the css isn't getting applied — vini
– 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
– Adam Kosmala, Commented Aug 6, 2019 at 12:40
@vini I'm presuming you're using webpack? If so what's your config? — Riddell
– Riddell, Commented Aug 14, 2019 at 14:15

Blue · Accepted Answer · 2019-08-15 02:55:47Z

7

+25

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, 2019 at 2:55

Blue

23k7 gold badges69 silver badges102 bronze badges

answered Aug 8, 2019 at 14:36

Taki

17.7k5 gold badges28 silver badges48 bronze badges

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

3 Comments

vini Over a year ago

I tried the React Wrapper It didnt work out same issue will try this thanks.

vini Over a year ago

am getting module loader failed

Taki Over a year ago

when using the ~ or when importing it in the component (without the ~)?

Keerthana Ramachandran · Accepted Answer · 2021-02-09 09:40:55Z

1

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";

answered Feb 9, 2021 at 9:40

Keerthana Ramachandran

314 bronze badges

Comments

Vu Luu · Accepted Answer · 2019-08-13 11:10:53Z

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, 2019 at 11:10

Vu Luu

8005 silver badges16 bronze badges

Collectives™ on Stack Overflow

Css not working for intro.js module in React

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related