Reactjs-intro NPM

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