React User Guide
npm install react-user-guide 
``bash`
npm install --save react-user-guide
`jsx
import React, { Component } from 'react';
import UserGuide from 'react-user-guide';
const style = {
width: '20vw',
backgroundColor: 'grey',
marginTop: '20vh',
marginLeft: '40vw',
padding: 5
};
const buttonConfig = {
yesText: 'Yes',
noText: 'No',
nextText: 'Next',
skipText: 'Skip',
finishText: 'Finish'
};
const guides = [
{
querySelector: '.unique-classname',
position: 'east',
title: 'First',
message: 'User guide position \'east\''
},
{
querySelector: '.unique-classname',
position: 'west',
title: 'Second',
message: 'User guide position \'west\''
},
{
querySelector: '.unique-classname',
position: 'north',
title: 'Third',
message: 'User guide position \'north\''
},
{
querySelector: '.unique-classname',
tooltipWidth: 500,
position: 'south',
title: 'Forth',
message: 'User guide position \'south\', with custom width'
}
];
export default class App extends Component {
render () {
return (
Target element
)
}
}
`
css
@import '~react-user-guide/dist/custom-style.css';
`
$3
`scss
// Style modal
.userGuide--modal {
h1 { }
p {
}
button {
}
}
// Style mask
.userGuide--mask {
}
// Style tooltip
.userGuide--message {
h3 {
}
p {
}
button {
}
}
`` guides [Guide]* - array of all guides/tooltip
guideKey [string]* - unique key that will be used to store in localStorage (default = 'guideKey')
title [string]* - Title used in Modal (default = 'Quick Guide')
content [string]* - Content used in Modal (default = 'Would you like us to walk you through different features in this app?')
buttonConfig [ButtonConfig]* - Text used by different buttons
querySelector [string]* - css selector of the target element
title [string]* - title of tooltop
message [string]* - message of tooltip
position [string] - (east|west|north|south)* - position of tooltip from target element (default = 'north')
tooltipWidth [int]* - width of tooltip (default = 240)
yesText [string]* - Text for 'Yes' button
noText [string]* - Text for 'No' button
nextText [string]* - Text for 'Next' button
skipText [string]* - Text for 'Skip' button
finishText [string]* - Text for 'Finish' button
Click here if images didn't load
!Initial modal
!Guide East
!Guide West
!Guide North
!Guide South
MIT © sandeshshrestha