React User Guide

Install

npm install --save react-user-guide-mindfire

Usage

import React, { Component } from "react";
import UserGuide from "react-user-guide-mindfire";

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