/react-user-onboarding

[WIP] A reactjs component library for user on-boarding or user flows

Primary LanguageJavaScript

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.

Version Documentation Maintenance License: MIT Twitter: johndamilola

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 ❤️)

🤝 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