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