react-user-guide

React User Guide

Install

npm install --save react-user-guide

Usage

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 (
      <UserGuide buttonConfig={buttonConfig} guides={guides}>
        <div style={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)

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

License

MIT © sandeshshrestha