https://github.com/uptick/react-interactive-tutorials
Framework for creating unobtrusive interactive tutorials for use in web apps.
https://github.com/uptick/react-interactive-tutorials
Last synced: 11 months ago
JSON representation
Framework for creating unobtrusive interactive tutorials for use in web apps.
- Host: GitHub
- URL: https://github.com/uptick/react-interactive-tutorials
- Owner: uptick
- License: mit
- Created: 2016-06-10T00:55:56.000Z (almost 10 years ago)
- Default Branch: master
- Last Pushed: 2021-09-24T17:48:03.000Z (over 4 years ago)
- Last Synced: 2024-11-11T21:57:41.566Z (over 1 year ago)
- Language: JavaScript
- Size: 453 KB
- Stars: 40
- Watchers: 12
- Forks: 7
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-interactive-tutorials
[](http://badge.fury.io/js/react-interactive-tutorials)
Framework for creating unobtrusive interactive tutorials for use in web apps.
## Live Demo
Have a play around with the live demo here: http://uptick.github.io/react-interactive-tutorials/
## How it Works
Tutorials are represented as a set of prompts that will result in the user successfully completing
actions within the interface of your app.
Rather than storing a state of the current tutorial step, the currently active tutorial step is
calculated on the fly by the step configuration's set of conditions. This allows the user to go off
and do something unexpected / get lost in the middle of a tutorial without consequence.
## Requirements
To install, you will need:
- Bootstrap 4 stylesheet, or an implementation of the used classes:
- btn
- btn-primary
- btn-secondary
- float-right
And anyone using your site will need:
- A relatively modern browser
- Javascript enabled
- Cookies enabled
## Installation
Install the npm package:
```
npm install react-interactive-tutorials
```
Include the built css located at:
```
node_modules/react-interactive-tutorials/dist/react-interactive-tutorials.css
```
Register your own tutorials:
```javascript
// es6
import { registerTutorials } from 'react-interactive-tutorials'
registerTutorials(YOUR_TUTORIALS);
// attached to global var
interactiveTutorials.registerTutorials(YOUR_TUTORIALS);
```
## Making tutorials
Full reference documentation coming soon. For now, take a look at the reference on the live demo at
http://uptick.github.io/react-interactive-tutorials/.