Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

reactour

Package Overview
Dependencies
Maintainers
1
Versions
67
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

reactour

Tourist Guide into your React Components

  • 1.2.0
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
42K
increased by2.26%
Maintainers
1
Weekly downloads
 
Created
Source

Reactour

Tourist Guide into your React Components

Install

npm i -S reactour

Initialize

Add the Tour Component in your Application:

import Tour from 'reactour'

class App extends Component {
  // ...
  
  render  (
    <div>
      { /* other stuff */}
      <Tour 
        steps={steps}
        isOpen={this.state.isTourOpen}
        onRequestClose={this.closeTour} />
    </div>
  )
}

const steps = [
  {
    selector: '.first-step', 
    content: 'This is my first Step',
  },
  // ...
]

PropTypes

PropDescTypeDefaultIs Required
classNameCustom class to add to the helperstring
closeWithMaskClose clicking the maskbooltrue
inViewThresholdScroll element to show when is outiside viewport adding this threshold valuenumber
isOpenyou know…bool
lastStepNextButtonChange Next button in last step into a custom button to close the Tourstring
maskClassNameCustom class to add to the maskstring
maskSpacepadding between elemente showed and masknumber10
nextButtonnext navigation button textstringNext
onAfterOpenfunction triggered after openfunc() => { document.body.style.overflowY = 'hidden' }
onBeforeClosefunction triggered before closefunc() => { document.body.style.overflowY = 'auto' }
onRequestClosefunction triggered to closefunc
prevButtonprev navigation button textstringPrev
scrollDurationSmooth scroll duration when positioning the target elementnumber1
scrollOffsetOffset when positioning the target elementnumbercalculates the vertical center of the page
showButtonsShow helper navigation butonsbooltrue
showNavigationShow helper navigation dotsbooltrue
showNumberShow helper number badgebooltrue
startAtStarting step each time the Tour is opennumber
stepsArray of steps with info and props[view bellow]
updateValue to listen if a forced update is neededstring
steps: PropTypes.arrayOf(PropTypes.shape({
  'selector': PropTypes.string.isRequired,
  'content': PropTypes.oneOfType([
    PropTypes.node,
    PropTypes.element,
    PropTypes.func,
  ]).isRequired,
  'position': PropTypes.string,
  'action': PropTypes.func,
  'style': PropTypes.object,
})),

Steps example

const steps = [
  {
    selector: '[data-tour="my-first-step"]',
    content: ({ goTo, inDOM }) => (
      <div>
        Lorem ipsum <button onClick={() => goTo(4)}>Got to Step 5</button>
        <br />{ inDOM && '🎉 Look at your step!'}
      </div>
    ),
    position: 'top',
    action: node => {
      node.focus()
      console.log('yup, the target element is also focused!')
    },
    style: {
      backgroundColor: '#bada55',
    },
  },
  // ...
]

Keywords

FAQs

Package last updated on 27 Apr 2017

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc