react-user-onboarding

react-user-onboarding

✨ A React Component library for User Onboarding (guided tour or explanation walkthrough) on your web application to increase usage and reduce churn rate of users upon first interaction.

Demo | Documentation | Issues

Install

npm install react-user-onboarding

yarn add react-user-onboarding

Usage

import React, { Component } from 'react'

import UserOnboarding from 'react-user-onboarding'
import 'react-user-onboarding/dist/index.css'

const tooltip1 = useRef();
const story = [
  {
    component: 'modal',
    intro: true,
    children: (
      // Html component for initial modal goes here
    )
  },
  {
    component: 'tooltip',
    ref: tooltip1,
    children: (
      // Html component for tooltip goes here
    )
  },
  {
    component: 'speech-bubble',
    children: (
      // Html component for speech-bubble goes here
    )
  },
  {
    component: 'modal',
    intro: false,
    children: (
      // Html component for last modal goes here
    )
  }
]

const Example = () => {
  return (
    <div>
      <UserOnboarding 
        story={story} 
        isVisible={isVisible}
        onClose={() => setIsVisible(false)} 
      />
    </div>
  )
}

UserOnboarding API

Name	Description	Type	Default
story	the story object for the onboarding flow	array<object>
isVisible	value used to toggle the component's visibility	boolean	false
initialPosition	value used to jump to a specific story point	number	0
onClose	function to close the component	function

Story Object

Name	Description	Type	Component
component	indicate the type of component (modal, tooltip, speech-bubble)	string	modal, tooltip, speech-bubble
intro	value to indicate the first onboarding step	boolean	modal
ref	ref to store the target node for the tooltip	React Ref	tooltip
children	the html content of the modals, tooltips and speech bubble	ReactNode	modal, tooltip
className	a css class name to style the modals, tooltips and speech bubble	string	modal, tooltip, speech-bubble

Modal Object Example

    {
        component: 'modal',
        intro: true,
        children: (<div>modal content goes here</div>)
    }

Tooltip Object Example

    {
        component: 'tooltip',
        ref: loginFormRef,
        children: (<div>tooltip content goes here</div>)
    }

Speech Bubble Object Example

    {
        component: 'speech-bubble',
        ref: loginFormRef,
        children: (<div>tooltip content goes here</div>)
    }

Author

👤 John Damilola (made with ❤️)

• Website: johndamilola.github.io
• Twitter: @johndamilola
• Github: @JohnDamilola
• LinkedIn: @johndamilola

🤝 Contributing

Contributions, issues and feature requests are welcome!

Feel free to check issues page. You can also take a look at the contributing guide.

Show your support

Give a ⭐️ if this project helped you!

📝 License

Copyright © 2020 John Damilola.

This project is MIT licensed.

---

This README was generated with ❤️ by readme-md-generator