https://github.com/the-couch/strider

Step through quizzes, applications, checkouts, and whatever you want...
https://github.com/the-couch/strider

flows quiz react stepper

Last synced: about 1 year ago
JSON representation

Step through quizzes, applications, checkouts, and whatever you want...

• Host: GitHub
• URL: https://github.com/the-couch/strider
• Owner: the-couch
• Created: 2018-03-07T04:09:17.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2018-03-07T15:44:11.000Z (over 8 years ago)
• Last Synced: 2024-05-05T18:21:09.469Z (about 2 years ago)
• Topics: flows, quiz, react, stepper
• Language: JavaScript
• Homepage:
• Size: 72.3 KB
• Stars: 17
• Watchers: 4
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# strider

A stepper library, for use in any type of flow, onboarding, quiz. With some helpers for animating between steps but without getting too in the way.

[![js-standard-style](https://cdn.rawgit.com/feross/standard/master/badge.svg)](http://standardjs.com)

## Usage

```javascript

import React from 'react'

import { Strider, Step } from 'react-strider'

import cx from 'classnames'

import Layout from './Layout'

import StepOne from './StepOne'

import StepTwo from './StepTwo'

import StepThree from './StepThree'

import StepFour from './StepFour'

class Quiz extends React.Component {

  constructor () {

    super()

    this.state = {

      products: []

    }

  }

  render () {

    return (

      

        

          

            {({ next, goTo, active, hiding, activeIndex }) => (

              


                

              

            )}

          

          

            {({ next, prev, goTo, active, hiding, activeIndex }) => (

              


                 this.setState({product: i})} />

              

            )}

          

          

            {({ next, prev, goTo, active, hiding, activeIndex }) => (

              


                

              

            )}

          

          

            {({ next, prev, goTo, active, hiding, activeIndex }) => (

              


                

              

            )}

          

        

      

    )

  }

}


```

## API

`next` - goes to the next step if there is one

`prev` - goes to the previous step if there is one

`goTo` - allows you to jump to any step `0` being the root step

`hiding` - a simple set timeout for applying animations between steps, you could also apply set timeouts on the next/prev call to add additional animations within your own components

`active` - the current active step, can be used again for animating

`activeIndex` - the current index, helpful if you want to have some ui for visualizing where you are in the flow, or numbered steps like step 3 of 7 for example.

MIT License