Skip to content

README.md

Latest commit

 

History

History
68 lines (49 loc) · 1.2 KB

README.md

File metadata and controls

68 lines (49 loc) · 1.2 KB

React Tutorial Overlay

A headless library that makes it easy to put tutorials on top of the screen.

(This is an open source library that is still under development.)

Features

  • ✨ step-by-step tutorial overlay
  • 🎨 easily customizable
  • 🤝 Pomise API (Coming Soon)
  • 🚀 Lightweight (Coming Soon)
  • 👻 Headless (Coming Soon)

Get Started

install with npm

npm install react-tutorial-overlay

install with yarn

yarn add react-tutorial-overlay
import { TutorialOverlay, tutorial } from 'react-tutorial-overlay';

const App = () => {
  const handleClick = () => {
    tutorial.open({
      steps: [
        {
          targetIds: ['target1'],
          title: 'title',
          content: 'content',
        },
      ],
      options: {},
    });
  };

  return (
    <div>
      <button onClick={handleClick}>open</button>
      <div id="target1">target</div>
      <TutorialOverlay />
    </div>
  );
};

content is rendered as a plain string. HTML markup in the string is not interpreted.

Documentation

Contributing

@sjsjsj1246