react-hopscotch-guide

1.0.0 • Public • Published

react-hopscotch

React component for quick guide, using Hopscotch library

Usage

All tour and step options like defined in the Hopscotch’s documentation are available respectively in Hopscotch and Step components.

Example

import React from 'react'
import { render } from 'react-dom'
 
import { Hopscotch, Step } from 'react-hopscotch'
 
render(
    <Hopscotch id="hello-hopscotch" active>
        <div>
            <Step
                title="My Header"
                content="This is the header of my page."
                placement="bottom"
            >
                <h1 id="header">My First Hopscotch Tour</h1>
            </Step>
            <Step
                title="My content"
                content="Here is where I put my content."
                placement="bottom"
            >
                <div id="content">
                    <p>Content goes here...</p>
                </div>
            </Step>
        </div>
    </Hopscotch>,
    document.getElementById('root')
)

Package Sidebar

Install

npm i react-hopscotch-guide

Weekly Downloads

1

Version

1.0.0

License

MIT

Unpacked Size

346 kB

Total Files

13

Last publish

Collaborators

  • alvinkl