npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-guest-tutorial

v0.0.7

Published

A ReactJS mixin to give new users a popup-based tour of your application.

Downloads

8

Readme

==========================================================================================================================

A ReactJS mixin to give new users a popup-based tour of your application. An example can be seen here.


Getting Started

  1. npm install --save react-guest-tutorial
  2. var wizard = require('react-guest-tutorial').Mixin
var wizard = require('react-guest-tutorial').Mixin;
let tour = {
   startIndex: 0,
   scrollToSteps: true,
steps: [
{
   text: "请先输入用户名",
   element: "#first",
   position: "center",
   closeButtonText: "下一步",
   offsetY: -50
},
{
   text: "请输入密码",
   element: "#sencond",
   position: "center",
   closeButtonText: "开始体验"
}
]
};
var cb = function() {
  console.log('User has completed tour!');
};

var App = React.createClass({

  mixins: [wizard(tour, cb)],

  ...

});

If you're going to initialize the mixin without steps and add them later asynchronously, set your startIndex to a negative value

...
startIndex: -1,
steps: []
...

Options

A Javascript object is passed to the wizard to specify options, as well as the steps of your tour as an array (there is also a method to define these asynchronously, discussed below). The options are:

  • startIndex (int): the index from which to begin the steps of the tour. This can be retrieved and saved via getUserTourProgress (discussed below), in order to be specified when a user returns. Defaults to 0.
  • scrollToSteps (bool): if true, the page will be automatically scrolled to the next indicator (if one exists) after a tooltip is dismissed. Defaults to true.
  • steps (array): the array of steps to be included in your tour. Defaults to an empty array.

Each "step" in the array represents one indicator and tooltip that a user must click through in the guided tour. A step has the following structure:

{
  "text": "The helpful tip or information the user should read at this step.",
  "element": "A jQuery selector for the element which the step relates to.",
  "position": "Where to position the indicator in relation to the element.",
  "closeButtonText": "An optional string to be used as the text for the tooltip close button."
}

Positions can be chosen from: top-left, top-right, right, bottom-right, bottom, bottom-left, left, and center. This defaults to center.


Completion Callback

An optional callback may be passed as the second parameter to wizard, which will be called once the current user has completed all the steps of your tour.


Methods

setTourSteps(steps, cb)

This function is intended to provide you with a method to asynchronously define your steps (if they need to be fetched from a database, etc.) It takes a list of steps (of the form discussed earlier), along with an optional callback function as parameters. This will completely overwrite any existing steps or progress. Once the state is updated, the callback function will be invoked.

getUserTourProgress()

Upon including the mixin, this will be available to your component. At any point, this method can be called to retrieve information about the current user's progress through the guided tour. The object returned looks like this:

{
  "index": 2,
  "percentageComplete": 50,
  "step": {
    "text": "...",
    "element": "...",
    "position": "..."
  }
}

This information can be used to save a user's progress upon navigation from the page or application, allowing you to return them back to their correct spot when they visit next using the startIndex option (discussed above).


Styling

Some basic styling is provided in /dist/css/tour-guide.css. This can either be included directly in your project, or used as a base for your own custom styles. Below, the HTML structure of the tour is also outlined for custom styling.

The guided tour consists of two main elements for each step: an indicator and a tooltip. An indicator is a flashing element positioned on a specific element on the page, cueing the user to click. Upon click, the associated tooltip is triggered which the user must then read and dismiss.

Note: Elements are dynamically positioned by initially setting their top and left CSS properties to -1000px. Once they have been initially rendered and measured, they are then positioned correctly. Animations on these CSS properties should be avoided.