https://github.com/sandeshshrestha/react-user-guide
React User Guide
https://github.com/sandeshshrestha/react-user-guide
react tooltip user-guide user-tour
Last synced: 4 months ago
JSON representation
React User Guide
- Host: GitHub
- URL: https://github.com/sandeshshrestha/react-user-guide
- Owner: sandeshshrestha
- License: mit
- Created: 2019-04-23T21:56:06.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2024-05-02T01:46:57.000Z (about 2 years ago)
- Last Synced: 2025-10-12T22:30:34.107Z (8 months ago)
- Topics: react, tooltip, user-guide, user-tour
- Language: JavaScript
- Size: 7.25 MB
- Stars: 19
- Watchers: 1
- Forks: 7
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# React User Guide
[](https://www.npmjs.com/package/react-user-guide) [](https://standardjs.com)
## 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 (
Target element
)
}
}
```
## Styling Guide
### Import pre-styled css
```css
@import '~react-user-guide/dist/custom-style.css';
```
### Use the following scss to style yourself
```scss
// 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)
### ButtonConfig
* 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](https://github.com/sandeshshrestha/React-User-Guide#screenshots)
## License
MIT © [sandeshshrestha](https://github.com/sandeshshrestha)