React Intro

React Intro is a library for creating step-by-step and powerful customer onboarding tours DEMO

Install

npm install --save reactjs-intro

Steps

const steps = [
  {
    selector: "#intro-1",
    position: "right-center",
    children: (
      <div>
        <p>
          Lorem Ipsum is simply dummy text of the printing and typesetting
          industry.
        </p>
      </div>
    ),
  },
  {
    selector: "#intro-2",
    position: "left-start"
    children: (
      <div>
        <p>
          Lorem Ipsum is simply dummy text of the printing and typesetting
          industry.
        </p>
      </div>
    ),
  },
  {
    selector: "#intro-3",
    position: "top-end"
    children: (
      <div>
        <p>
          Lorem Ipsum is simply dummy text of the printing and typesetting
          industry.
        </p>
      </div>
    ),
  },
];

Name	Description	Type
selector	CSS selector	String
position	Position of the tooltip	String
children	The tooltip content	String or JSX

Usage

import Intro from "react-intro";
import "react-intro/dist/index.css";

const Example = () => {
  const [enabled, setEnabled] = useState(false);

  const toggle = () => {
    setEnabled(!enabled);
  };

  return <Intro steps={steps} enabled={enabled} onComplete={toggle} />;
};

PropTypes

Intro.propTypes = {
  steps: PropTypes.arrayOf(
    PropTypes.shape({
      selector: PropTypes.string.isRequired,
      position: PropTypes.oneOf([
        "left-center",
        "left-start",
        "left-end",
        "right-center",
        "right-start",
        "right-end",
        "top-center",
        "top-start",
        "top-end",
        "bottom-center",
        "bottom-start",
        "bottom-end",
      ]).isRequired,
      children: PropTypes.node.isRequired,
    })
  ),
  enabled: PropTypes.bool,
  initialStep: PropTypes.number,
  onComplete: PropTypes.func,
  onChange: PropTypes.func,
  nextLabel: PropTypes.string,
  backLabel: PropTypes.string,
  doneLabel: PropTypes.string,
};

Intro.defaultProps = {
  steps: [],
  initialStep: 0,
  enabled: false,
  onChange: () => {},
  onComplete: () => {},
  nextLabel: "Next",
  backLabel: "Back",
  doneLabel: "Done",
};

Props

Name	Type	Description
enabled	Boolean	Defines if the steps are visible or not.
initialStep	Number	Step to show at the beginning
steps	Array	All the steps.
onChange	Function	Callback called when the steps are changed and the callback function will receive the current step as parameter
onComplete	Function	Callback called when all the steps are completed
nextLabel	String	Label for next button
doneLabel	String	Label for done button
backLabel	String	Label for back button

License

MIT © https://github.com/vkaswin/react-intro.git