react-user-onboarding
v0.0.3
Published
A React Component library for User Onboarding
Downloads
545
Readme
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