Tour

Create awesome tours for your app! with react-joyride .

Tour With Overlay

React-joyride is bydefault provide tour wiht overlay contents

Preview

Jsx

Card title

Card subtitle

Some quick example text to build on the card title and make up the bulk of the card's content.

Button

Cras justo odio

Dapibus ac facilisis in

Vestibulum at eros

Card Link Another Link

import React, {useState} from 'react';
import { Button, Card, Col, ListGroup, Row } from 'react-bootstrap';
import ReactJoyride from 'react-joyride';

//Image
import cardImg from '../../../Assets/dist/img/slide1.jpg';

const TourWithOverlay = () => {
    const [startTour, setStartTour] = useState(false);

    const Steps = [
        {
            target: '.card-img-top',
            content: <h2>This is a Card Image!</h2>,
            placement: 'right'
        },
        {
            target: '.card-title',
            content: <h2>This is a Card Title</h2>,
            locale: { skip: <strong aria-label="skip">S-K-I-P</strong> },
            placement: 'right'
        },
        {
            target: '.card-text',
            content: <h2>This is a Card Contents</h2>,
            placement: 'right'
        },
        {
            target: '.last-tour-item',
            content: <h2>This is a Card Footer</h2>,
            locale: { last: <strong aria-label="last">Done</strong> },
            placement: 'right'
        }
    ]

    const handleStart = (e) => {
        e.preventDefault();
        setStartTour(true);
    };

  return (
    <>
        <ReactJoyride
            steps={Steps}
            continuous={true}
            scrollToFirstStep={true}
            showProgress={true}
            showSkipButton={true}
            run={tourState}
            disableOverlay
        />
        <Row>
            <Col xl={6} sm={6} xs={12}>
                <Button variant="danger" className="mb-3" onClick={e => handleStart(e)}>Start Tour</Button>
                <Card>
                    <Card.Img variant="top" className="elem-1" src={cardImg} alt="Card cap" />
                    <Card.Body>
                        <Card.Title>Card title</Card.Title>
                        <Card.Subtitle className="mb-2 text-muted elem-2">Card subtitle</Card.Subtitle>
                        <Card.Text className="elem-3">Some quick example text to build on the card title and make up the bulk of the card's content.</Card.Text>
                        <a href=" #" className="btn btn-primary">Button</a>
                    </Card.Body>
                    <ListGroup className="list-group-flush">
                        <ListGroup.Item>Cras justo odio</ListGroup.Item>
                        <ListGroup.Item>Dapibus ac facilisis in</ListGroup.Item>
                        <ListGroup.Item>Vestibulum at eros</ListGroup.Item>
                    </ListGroup>
                    <Card.Footer className="last-tour-item elem-4">
                        <Card.Link href="#">Card Link</Card.Link>
                        <Card.Link href="#">Another Link</Card.Link>
                    </Card.Footer>
                </Card>
            </Col>
        </Row>
    </>
  );
};

export default TourWithOverlay;

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Tour Without Overlay

You can use React-joyride without any overlay by providing a disableOverlay props in <ReactJoyride> component.