reactjs-onboarding

> The reactjs-onboarding library exported as Node.js modules.

 


!grab-landing-page

Installation

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.

1) This github repository, using ``git clone`

2) Using npm `npm install reactjs-onboarding.js --save`

Usage

reactjs-onboarding.js can be added to your project in four simple steps:



1) Include named imports of Onboarding.js and OnboardingItem.js / OnboardingTag.js in your project



`jsx
import {Onboarding} from 'reactjs-onboarding'
import {OnboardingItem} from 'reactjs-onboarding'
import {OnboardingTag} from 'reactjs-onboarding'
`


2) Create a state variable visible in the class and set it to false



`jsx
state = { visible:false };
`


3) Set visible parameter to true when you want the Onboarding to get called



`jsx
this.setState({ visible: true })
`


4) Passing the coordinates


* Give unique Id to the element that you want to point the arrow to


`jsx

Pass the co-ordinates by id

`

* Give unique reference to the element you want to point the arrow to


`jsx

this.reference = e}>
Pass the co-ordinates by reference

`

* Give coordinates in the form of object of the area where you want to point the arrow to. l - left, t - top, w - width, h- height


`jsx




`

* Enclose the elements you want to highlight in an OnboardingTag


`jsx







``

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Please make sure to update tests as appropriate.

License

MIT � [](https://github.com/)