diff --git a/README.md b/README.md new file mode 100644 index 0000000..6e567d5 --- /dev/null +++ b/README.md @@ -0,0 +1,77 @@ +# CoachmarkJS + +## Why ?? + +Often while building amazing UIs, we forget to build an onboarding experience. Without onboarding, user might not know how to best use it. This package helps you to make a good onboaring experience, by making just a few changes in your document. + +## Installation + +To install via npm run +``` npm install coachmarkjs ``` + +Or yarn +``` yarn add coachmarkjs ``` + +### Usage + +Import the package +```js + import Coachmark from 'coachmarkjs' +``` + +Add the data-attribute `data-coachmark` to your DOM element which you want to highlight. +This attribute takes a number which lets you specify the order in which the elements would be +highlighted. DOM Element with attribute `data-coachmark = 0` will be highlighted before element with attribute `data-coachmark = 1` + +Similarly, add the data-attribute `data-coachmark-text` to DOM element for the tooltip text. + +As shown below, + +```html +
+
+ +
+

+ This is a text element +

+
+``` + +To initialize it + +```js + Coachmark.init() +``` + +For React users, + +```js + // Onboarding Component + import Coachmark from 'coachmarkjs' + class Onboarding extends React.Component { + + componentDidMount() { + Coachmark.init() + } + + componentWillUnmount() { + Coachmark.destroy() + } + + render() { + return ( +
+ //..... +
+ ) + } + } +``` + +It uses dynamic style sheets which are created inly after `Coachmark.init()` is called and destroyed as soon as `Coachmark.destroy()` is called. This is a flexible approach, as it +allows these styles to be overriden to suit the styling of the app.