quick-intro

A small React wrapper around intro.js-react. The wrapper provides support for both steps and hints, persisting the walkthrough progress across screens using local storage.

Quicklinks

• Example
• Installation
• Usage
  • Steps
  • Hints
• QuickIntro.js API
• QuickIntro.js options

Example

You can find a small example here on codesandbox.io.

Installation

Install using Npm (don't forget to add the --save option if you're still using npm < 5):

$ npm i @next-cafeteria/quick-intro

Or Yarn:

$ yarn add @next-cafeteria/quick-intro

Make sure to have React & Intro.js installed (they're peer dependencies) and the Intro.js CSS definitions properly loaded into your project.

This would usually looks like:

import 'intro.js/introjs.css';

Usage

Two component are available for both steps and hints:

import { PersistentSteps, PersistentHints } from '@next-cafeteria/quick-intro';

PersistentSteps

Basic example:

<PersistentSteps
  steps={steps}
  title="My steps"
/>

Props

| Name | Description | Type | Required | | --- | --- | :---: | :---: | | steps | All the steps. | Step[] | ✅ | | title | Title of the tutorial | String | |

Step

const steps = [
  {
    element: '.selector1',
    intro: 'test 1',
  },
  {
    element: '.selector2',
    intro: 'test 2',
  },
  {
    element: '.selector3',
    intro: 'test 3',
  },
];

| Name | Description | Type | Required | | --- | --- | :---: | :---: | | element | CSS selector to use for the step. | String | | | intro | The tooltip content. | String | React element | ✅ |

PersistentHints

Basic example:

<Hints
  hints={hints}
/>

Props

| Name | Description | Type | Required | | --- | --- | :---: | :---: | | hints | All the hints. | Hint[] | ✅ | | onClick | Callback called when a hint is clicked. | Function ( ) | |

Hint

const hints = [
  {
    element: '.selector1',
    hint: 'test 1',
  },
  {
    element: '.selector2',
    hint: 'test 2',
  },
];

| Name | Description | Type | Required | | --- | --- | :---: | :---: | | element | CSS selector to use for the hint. | String | ✅ | | hint | The tooltip text. | String | ✅ |

QuickIntro.js options

| Name | Description | Type | | --- | --- | :---: | | nextLabel | Next button label. | String | | prevLabel | Previous button label. | String | | skipLabel | Skip button label. | String | | doneLabel | Done button label. | String | | hidePrev | Hides the Previous button in the first step. | Boolean | | hideNext | Hide the Next button in the last step. | Boolean | | tooltipClass | CSS class of the tooltips. | String | | highlightClass | CSS class of the helperLayer. | String | | exitOnEsc | Exit by pressing Escape. | Boolean | | exitOnOverlayClick | Exit by clicking on the overlay layer. | Boolean | | showStepNumbers | Show steps number in a red circle. | Boolean | | keyboardNavigation | Allows navigation between steps using the keyboard. | Boolean | | showButtons | Show navigation buttons. | Boolean | | showBullets | Show bullets. | Boolean | | showProgress | Show progress indicator. | Boolean | | scrollToElement | Enables scrolling to hidden elements. | Boolean | | overlayOpacity | Opacity of the overlay. | Number | | scrollPadding | Padding when automatically scrolling to an element. | Number | | positionPrecedence | Precedence of positions. | String[] | | disableInteraction | Disables interaction inside elements. | Boolean | | hintPosition | Position of the hints. | String | | hintButtonLabel | Hint button label. | String | | hintAnimation | Enables hint animations. | Boolean |

License

Licensed under the ISC License, Copyright © Next-Cafeteria.

See LICENSE for more information.