Socket
Socket
Sign inDemoInstall

byte-guide

Package Overview
Dependencies
5
Maintainers
2
Versions
9
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

    byte-guide

New feature guide


Version published
Maintainers
2
Install size
896 kB
Created

Readme

Source

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. mask no mask

Installation

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

/* load via umd */
<script src='https://unpkg.com/byte-guide/dist/index.umd.min.js'></script>
/* load via umd and specified version */
<script src='https://unpkg.com/byte-guide@version/dist/index.umd.min.js'></script>

Usage

import Guide from 'byte-guide';
<Guide
  steps={[]}
  localKey="uni-key"
  /* customize styles */
  hotspot
  modalClassName="my-guide-modal"
  maskClassName="my-guide-arrow"
  /* customize callbacks */
  onClose={() => {
    /* 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

propsdefinitiontyperequireddefalut value
stepsAn array of info of each step of the onboarding sequenceIStep[]--
localKeyA unique key that will be stored in localStorage to indicate if the guide has finishedstring--
expireDateThe expire date of the guide when it will not be displayed anymorestring,YYYY-mm-hh--
closableIf the guide can be closed before the last step. If false, the close button x will not be displayed on each modal.booltrue
closeEleCustomize the element that skips the guidestring, reactNode
modalClassNameThe class name of the modalstring--
maskClassNameThe class name of the maskstring--
maskWhether or not to display the maskboolfalse
arrowWhether or not to display the arrowbooltrue
hotspotWhether or not to display the hotspotboolfalse
stepTextThe custom text for the step info(stepIndex, stepCount): string => {}(stepIndex, stepCount) => Step ${stepIndex} of ${stepCount}
nextTextThe custom text for the Next Step buttonstringNext
prevTextThe custom text for the Previous step buttonstringPrevious
showPreviousBtnWhether or not to display the previous buttonbooltrue
okTextThe custom text for the confirm button at the last stepstringI know
visibleIf the guide is visiblebooltrue
langThe language of use'zh' | 'en' | 'ja''zh'
stepThe first step's numbernumber0
afterStepChangeThe callback function when the step changes(nextIndex, nextStep): void=>{}--
beforeStepChangeThe callback function when the user is about to move to the next step(stepIndex: number, step: IStep) => void--
onCloseThe callback function when the guide closes */
onClose?: () => void;():void=> {}--

steps: IStep[]

keydefinitiontyperequireddefalut value
selectorThe CSS Selector of the anchor element or the anchor element itselfstring | () => reactNode, reactNode--
targetPosIf you don't want the modal to be displayed relative to an anchor element, you can pass a targetPos object to indicate the modal's position relative to the document body{ top, left, width, height }Required when selector is not defined--
titleThe title of the modalstring--
contentThe content of the modalstring | reactNode--
placementThe placement of the modal relative to the selector'top' | 'bottom' | 'left' | 'right' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'left-top' | 'left-bottom' | 'right-top' | 'right-bottom''bottom'
offsetThe offset of the modal relative to the selector. x indicates the horizontal offset, y the vertical offset{ x, y }--
parentThe parent component to mount'body'or null--
visibleIf this step is visiblebooltrue
skipIf this step should be skippedboolfalse
beforeStepChangeThe function called when user click "next" and BEFORE going to the next step(curStep: IStep, curStepIndex: number, steps: IStep[]) => void;--
afterStepChangeThe function called when user click "next" and AFTER going to the next step(curStep: IStep, curStepIndex: number, steps: IStep[]) => void;--

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: () => {
      window.open('https://my.web.net')
    }
  },
  {
    selector: () => {
        const tabs = Array.from(
          document.querySelectorAll('.nav-scroll > div > div > .tab')
        );
        return tabs?.[2];
      },
    title: 'Customer Detail',
    content: 'In this tab, you can read and update customer details.'
    visible: location.pathname === 'customer/detail'
  }
];

Keywords

FAQs

Last updated on 31 Jul 2023

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc