Introduction

English | 简体中文

When we onboard new users or ship new features, how do we make sure that our audience knows what's in it and get them excited to use our apps? That's where an onboarding sequence comes into play. This React library guide offers an effective way to construct a smooth onboarding experience.

Installation

/* install via npm or yarn */
npm i byte-guide
yarn add byte-guide

/* load via umd */

/* load via umd and specified version */

Usage

import Guide from 'byte-guide';
 {
    /* do sth */
  }}
  beforeStepChange={(nextIndex, nextStep) => {
    /* do sth */
  }}
  afterStepChange={(nextIndex, nextStep) => {
    /* do sth */
  }}
  /* customize footers */
  stepText={(stepIndex, stepCount) => `Step ${stepIndex} of ${stepCount}`}
  nextText="Next"
  prevText="Previous"
  showPreviousBtn
  okText="Finish"
/>;

API

Component API's

steps: IStep[]

An example of steps

const steps = [
  {
    selector: '#search',
    title: 'Search',
    content: <div>You can now search for your customers using ID or name</div>,
    placement: 'bottom-left',
    offset: {
      x: 20,
    }
    beforeStepChange: () =&gt; {
      window.open('https://my.web.net')
    }
  },
  {
    selector: () =&gt; {
        const tabs = Array.from(
          document.querySelectorAll('.nav-scroll &gt; div &gt; div &gt; .tab')
        );
        return tabs?.[2];
      },
    title: 'Customer Detail',
    content: 'In this tab, you can read and update customer details.'
    visible: location.pathname === 'customer/detail'
  }
];