Folders and files

Name		Name	Last commit message	Last commit date
Latest commit History 170 Commits
.github		.github
example		example
screenshots		screenshots
src		src
.babelrc		.babelrc
.editorconfig		.editorconfig
.eslintrc		.eslintrc
.gitignore		.gitignore
.nvmrc		.nvmrc
CODE_OF_CONDUCT.md		CODE_OF_CONDUCT.md
CONTRIBUTING.md		CONTRIBUTING.md
LICENSE		LICENSE
README.md		README.md
package.json		package.json
rollup.config.js		rollup.config.js
sonar-project.properties		sonar-project.properties
yarn.lock		yarn.lock

Repository files navigation

React User Guide

Install

npm install --save react-user-guide

Usage

importReact,{Component}from'react';importUserGuidefrom'react-user-guide';conststyle={width:'20vw',backgroundColor:'grey',marginTop:'20vh',marginLeft:'40vw',padding:5};constbuttonConfig={yesText:'Yes',noText:'No',nextText:'Next',skipText:'Skip',finishText:'Finish'};constguides=[{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'}];exportdefaultclassAppextendsComponent{render(){return(<UserGuidebuttonConfig={buttonConfig}guides={guides}><divstyle={style}className="unique-classname">Target element</div></UserGuide>)}}

Styling Guide

Import pre-styled css

@import'~react-user-guide/dist/custom-style.css';

Use the following scss to style yourself

// Style modal.userGuide--modal {h1 {  }p {  }button {  }}// Style mask.userGuide--mask {}// Style tooltip.userGuide--message {h3 {  }p {  }button {  }}

Configs

<HelpText>

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

Guide

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)