Ninety-nine Pitchers of Malt

    @stamen/intromanager

    0.2.0 • Public • Published

    IntroManager

    React wrapper for intro.js, a simple walkthrough builder library that highlights and annotates elements as defined by selectors.

    Part of the @stamen/panorama toolkit.

    Usage

    import React from 'react';
    import ReactDOM from 'react-dom';
    import { IntroManager } from '@panorama/toolkit';
    
    let introManagerConfig = {
      open: true,
      step: 1,
      config: {
        showStepNumbers: false,
        skipLabel: '×',
        nextLabel: '⟩',
        prevLabel: '⟨',
        doneLabel: '×'
      },
      
      steps: [
        {
          "element": ".left-column .top-row.template-tile",
          "intro": "Some copy describing the first element.",
          "position": "right"
        },
        {
          "element": ".right-column .top-row.template-tile",
          "intro": "<p>Some <strong>HTML</strong>copy for the second element.</p>",
          "position": "left"
        },
        {
          "element": ".left-column .bottom-row.template-tile",
          "intro": "Saved the best element for last.",
          "position": "top"
        }
      ],
    
      onExit: () => {
        // @panorama/toolkit components strive to be stateless.
        // Therefore, consumers of IntroManager are expected to
        // pass open/closed state into the component.
        this.setState({
          intro: {
            open: false
          }
        });
      }
    }
    
    ReactDOM.render(<IntroManager {...introManagerConfig}/>, document.body);

    Keywords

    none

    Install

    npm i @stamen/intromanager

    DownloadsWeekly Downloads

    1

    Version

    0.2.0

    License

    ISC

    Last publish

    Collaborators

    • ericsoco
    • mojodna
    • stamen