React User Guide
npm install react-user-guide-mfsbash
npm install --save react-user-guide-mindfire
`
Usage
`jsx
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 (
Target element
);
}
}
`
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 {
}
}
``