Walkthrough

Close

import React, { useState } from 'react'
import { Button, Walkthrough } from '../../'

const WalkthroughDefault = (props) => {
  const [state, setState] = useState({
    run: false,
    steps: [
      {
        title: 'Example title',
        content:
      'This was an example of a Beacon in the Walkthrough Kit it is used as a simple indicator to inform users about a particular thing',
        target: '.example',
      },
      {
        title: 'Toggle',
        content:
        'By default the walkthrough kit will cycle through each step provided.',
        target: '.pb_toggle_control',
      },
      {
        title: 'Top Nav',
        content:
          'By default the walkthrough kit will cycle through each step provided.',
        target: '.pb--page--topNav',
      },
    ],
  })

  return (
    <div>
      <div
          className="example"
          style={{ 'display': 'inline' }}
      >
        {'Start the Tour. Then click the Beacon to demo the default behavior of the Walkthrough Kit'}
      </div>
      <br />
      <br />
      <Button
          onClick={() => {
            setState({ ...state,
              run: true,
            })
          }}
      >
        {'Start Tour'}
      </Button>
      <br />
      <br />
      <Button
          onClick={() => {
          setState({
            ...state,
            run: false,
          })
        }}
      >
        {'Reset/Stop Tour'}
      </Button>

      <Walkthrough
          run={state.run}
          steps={state.steps}
          {...props}
      />
    </div>
  )
}

export default WalkthroughDefault

Close

import React, { useState } from 'react'
import { Button, Walkthrough } from '../../'

const WalkthroughContinuous = (props) => {
  const [state, setState] = useState({
    run: false,
    steps: [
      {
        title: 'Example Title',
        content: 'Setting the prop - continuous allows the next button to appear and lets the user move to the next step by pressing the next button instead of the beacon',
        target: '.examplePaused',
      },
      {
        title: 'Toggle',
        content: 'Setting the prop - continuous allows the next button to appear and lets the user move to the next step by pressing the next button instead of the beacon',
        target: '.pb_toggle_control',
      },
      {
        title: 'Top Nav',
        content: 'Setting the prop - continuous allows the next button to appear and lets the user move to the next step by pressing the next button instead of the beacon',
        target: '.pb--page--topNav',
      },
    ],
  })

  return (
    <div>
      <div
          className="examplePaused"
          style={{ 'display': 'inline' }}
      >
        {'Start the Tour. Then click the Beacon to demo the default behavior of the Walkthrough Kit'}
      </div>
      <br />
      <br />
      <Button
          onClick={() => {
            setState({ ...state,
              run: true,
            })
          }}
      >
        {'Start Tour'}
      </Button>
      <br />
      <br />
      <Button
          onClick={() => {
          setState({
            ...state,
            run: false,
          })
        }}
      >
        {'Reset/Stop Tour'}
      </Button>

      <Walkthrough
          run={state.run}
          steps={state.steps}
          {...props}
          continuous
      />
    </div>
  )
}

export default WalkthroughContinuous

Close

import React, { useState } from 'react'
import { Button, Walkthrough } from '../../'

const WalkthroughNoBeacon = (props) => {
  const [state, setState] = useState({
    callback: (data) => {
      if (data.action === 'close' && data.type === 'step:after') {
        // This explicitly stops the tour (otherwise it displays a "beacon" to resume the tour)
        setState({ ...state, run: false })
      }
    },
    run: false,
    steps: [
      {
        title: 'Example Title',
        content: 'Setting the prop - continuous allows the next button to appear and lets the user move to the next step by pressing the next button instead of the beacon',
        target: '.exampleNoBeacon',
        disableBeacon: true,
      },
      {
        title: 'Toggle',
        content: 'Setting the prop - continuous allows the next button to appear and lets the user move to the next step by pressing the next button instead of the beacon',
        target: '.pb_toggle_control',
      },
      {
        title: 'Top Nav',
        content: 'Setting the prop - continuous allows the next button to appear and lets the user move to the next step by pressing the next button instead of the beacon',
        target: '.pb--page--topNav',
      },
    ],
  })

  return (
    <div>
      <div
          className="exampleNoBeacon"
          style={{ 'display': 'inline' }}
      >
        {'Start the Tour. Then click the Beacon to demo the default behavior of the Walkthrough Kit'}
      </div>
      <br />
      <br />
      <Button
          onClick={() => {
            setState({ ...state,
              run: true,
            })
          }}
      >
        {'Start Tour'}
      </Button>
      <br />
      <br />
      <Button
          onClick={() => {
          setState({
            ...state,
            run: false,
          })
        }}
      >
        {'Reset/Stop Tour'}
      </Button>

      <Walkthrough
          run={state.run}
          steps={state.steps}
          {...props}
          continuous
      />
    </div>
  )
}

export default WalkthroughNoBeacon

Close

import React, { useState } from 'react'
import { Button, Walkthrough } from '../../'

const WalkthroughNoOverlay = (props) => {
  const [noOverlay, setNoOverlayState] = useState({
    callback: (data) => {
      if (data.action === 'close' && data.type === 'step:after') {
        // This explicitly stops the tour (otherwise it displays a "beacon" to resume the tour)
        setNoOverlayState({ ...noOverlay, run: false })
      }
    },
    disableOverlay: true,
    run: false,
    steps: [
      {
        title: 'Example Title',
        content: 'Setting the prop - continuous allows the next button to appear and lets the user move to the next step by pressing the next button instead of the beacon',
        target: '.exampleNoOverlay',
      },
      {
        title: 'Toggle',
        content: 'Setting the prop - continuous allows the next button to appear and lets the user move to the next step by pressing the next button instead of the beacon',
        target: '.pb_toggle_control',
      },
      {
        title: 'Top Nav',
        content: 'Setting the prop - continuous allows the next button to appear and lets the user move to the next step by pressing the next button instead of the beacon',
        target: '.pb--page--topNav',
      },
    ],
  })

  return (
    <div>
      <div
          className="exampleNoOverlay"
          style={{ 'display': 'inline' }}
      >
        {'Start the Tour. Then click the Beacon to demo the default behavior of the Walkthrough Kit'}
      </div>
      <br />
      <br />
      <Button
          onClick={() => {
            setNoOverlayState({ ...noOverlay,
              run: true,
            })
          }}
      >
        {'Start Tour'}
      </Button>
      <br />
      <br />
      <Button
          onClick={() => {
          setNoOverlayState({
            ...noOverlay,
            run: false,
          })
        }}
      >
        {'Reset/Stop Tour'}
      </Button>

      <Walkthrough
          disableOverlay
          run={noOverlay.run}
          steps={noOverlay.steps}
          {...props}
      />
    </div>
  )
}

export default WalkthroughNoOverlay

Close

import React, { useState } from 'react'
import { Button, Walkthrough } from '../../'

const WalkthroughMultiBeacon = (props) => {
  const [stateA, setStateA] = useState({
    run: false,
    steps: [
      {
        title: 'Example title',
        content:
          'This was an example of a Beacon in the Walkthrough Kit it is used as a simple indicator to inform users about a particular thing',
        target: '.exampleMulti',
      },
    ],
  })

  const [stateB, setStateB] = useState({
    run: false,
    steps: [
      {
        title: 'Toggle',
        content:
          'By default the walkthrough kit will cycle through each step provided.',
        target: '.pb_toggle_control',
      },
    ],
  })

  const [stateC, setStateC] = useState({
    run: false,
    steps: [
      {
        title: 'Top Nav',
        content:
          'By default the walkthrough kit will cycle through each step provided.',
        target: '.pb--page--topNav',
      },
    ],
  })

  return (
    <div>
      <div
          className="exampleMulti"
          style={{ 'display': 'inline' }}
      >
        {'Start the Tour. Then click the Beacon to demo the default behavior of the Walkthrough Kit'}
      </div>
      <br />
      <br />
      <Button
          onClick={() => {
          setStateA({
            ...stateA,
            run: true,
          })
          setStateB({
            ...stateB,
            run: true,
          })
          setStateC({
            ...stateC,
            run: true,
          })
          }}
      >
        {'Start Tour'}
      </Button>
      <br />
      <br />
      <Button
          onClick={() => {
          setStateA({
            ...stateA,
            run: false,
          })
          setStateB({
            ...stateB,
            run: false,
          })
          setStateC({
            ...stateC,
            run: false,
          })
        }}
      >
        {'Reset/Stop Tour'}
      </Button>

      <Walkthrough
          run={stateA.run}
          steps={stateA.steps}
          {...props}
      />
      <Walkthrough
          run={stateB.run}
          steps={stateB.steps}
          {...props}
      />
      <Walkthrough
          run={stateC.run}
          steps={stateC.steps}
          {...props}
      />
    </div>
  )
}

export default WalkthroughMultiBeacon

Close

import React, { useState } from 'react'
import { Button, Walkthrough } from '../../'

const WalkthroughStyled = (props) => {
  const [state, setState] = useState({
    run: false,
    steps: [
      {
        title: 'Example title',
        content:
      'This was an example of a Beacon in the Walkthrough Kit it is used as a simple indicator to inform users about a particular thing',
        target: '.styled',
      },
      {
        title: 'Toggle',
        content:
        'By default the walkthrough kit will cycle through each step provided.',
        target: '.pb_toggle_control',
      },
      {
        title: 'Top Nav',
        content:
          'By default the walkthrough kit will cycle through each step provided.',
        target: '.pb--page--topNav',
      },
    ],
  })

  return (
    <div>
      <div
          className="styled"
          style={{ 'display': 'inline' }}
      >
        {'Start the Tour. Then click the Beacon to demo the default behavior of the Walkthrough Kit'}
      </div>
      <br />
      <br />
      <Button
          onClick={() => {
            setState({ ...state,
              run: true,
            })
          }}
      >
        {'Start Tour'}
      </Button>
      <br />
      <br />
      <Button
          onClick={() => {
          setState({
            ...state,
            run: false,
          })
        }}
      >
        {'Reset/Stop Tour'}
      </Button>

      <Walkthrough
          run={state.run}
          steps={state.steps}
          styles={{
            options: {
            beaconSize: 120,
            },
          }}
          {...props}
      />
    </div>
  )
}

export default WalkthroughStyled