JSPM – rafudu-reactour@1.9.0

Package Exports

rafudu-reactour

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (rafudu-reactour) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Tourist Guide into your React Components

Demo

This is a fork from: https://github.com/elrumordelaluz/reactour

Install

npm i --save reactour styled-components

yarn add reactour styled-components

From v1.8.6 styled-components it isn't bundled into the package.

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

Prop	Desc	Type	Default	Is Required
`accentColor`	Change `--reactour-accent` color (helper number + dots)	`string`	`#007aff`
`badgeContent`	Function to customize Badge content `(current, total) => {}`	`func`
`children`	Elements to appear after the Mask (need to be styled correctly to have a `position` and `z-index` higher than Mask)	`node	elem`	`false`
`className`	Custom class to add to the helper	`string`
`closeWithMask`	Close clicking the mask	`bool`	`true`
`disableDotsNavigation`	Isn't possible to interact with helper dots	`bool`
`disableInteraction`	Isn't possible to interact with highlighted elements	`bool`
`disableKeyboardNavigation`	Isn't possible to interact with keyboard arrows	`bool`
`getCurrentStep`	Function triggered each time current step change	`func`	`step => { /* 'step' is the current step index */ }`
`goToStep`	Programmatically change current step	`number`
`highlightedMaskClassName`	Custom class name for element which is overlaid target element	`string`
`inViewThreshold`	Scroll element to show when is outiside viewport adding this threshold value	`number`
`isOpen`	You know…	`bool`		✅
`lastStepNextButton`	Change Next button in last step into a custom button to close the Tour	`node`
`maskClassName`	Custom class to add to the mask	`string`
`maskSpace`	Padding between elemente showed and mask	`number`	`10`
`nextButton`	Next navigation button text	`node`
`nextStep`	Override default `nextStep` function to use a custom one	`func`
`onAfterOpen`	Function triggered after open	`func`	`() => { document.body.style.overflowY = 'hidden' }`
`onBeforeClose`	Function triggered before close	`func`	`() => { document.body.style.overflowY = 'auto' }`
`onRequestClose`	Function triggered to close	`func`
`prevButton`	Prev navigation button text	`node`
`prevStep`	Override default `prevStep` function to use a custom one	`func`
`rounded`	Beautify helper + mask with border-radius (in px)	`number`	`0`
`scrollDuration`	Smooth scroll duration when positioning the target element	`number`	`1`
`scrollOffset`	Offset when positioning the target element	`number`	calculates the vertical center of the page
`showButtons`	Show helper navigation butons	`bool`	`true`
`showNavigation`	Show helper navigation dots	`bool`	`true`
`showNavigationNumber`	Show number when hovers on each navigation dots	`bool`	`true`
`showNumber`	Show helper number badge	`bool`	`true`
`startAt`	Starting step each time the Tour is open	`number`
`steps`	Array of steps with info and `props`	[view bellow]		✅
`update`	Value to listen if a forced update is needed	`string`
`updateDelay`	Delay time when forcing update. Useful when there are known animation/transitions	`number`	1

steps: PropTypes.arrayOf(PropTypes.shape({
  'selector': PropTypes.string,
  'content': PropTypes.oneOfType([
    PropTypes.node,
    PropTypes.element,
    PropTypes.func,
  ]).isRequired,
  'position': PropTypes.oneOf(['top', 'right', 'bottom', 'left', 'center']),
  'action': PropTypes.func,
  'style': PropTypes.object,
  'stepInteraction': PropTypes.bool,
})),

Steps example

const steps = [
  {
    selector: '[data-tour="my-first-step"]',
    content: ({ goTo, inDOM }) => (
      <div>
        Lorem ipsum <button onClick={() => goTo(4)}>Go 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',
    },
  },
  // ...
]