React User Guide

 

Install

``bash
npm install --save react-user-guide
`

Usage

`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 (



)
}
}

`

Styling Guide

$3


`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 {

}
}

``

Configs

$3

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

$3

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)

$3

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

DEMO

https://sandeshshrestha.github.io/react-user-guide/

Screenshots

Click here if images didn't load
!Initial modal
!Guide East
!Guide West
!Guide North
!Guide South

License

MIT © sandeshshrestha