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.