striderOne.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Strider, Step } from 'react-strider';
import cx from 'classnames'

class App extends React.Component {
  render () {
    return (
      <div>
        <h1>React Strider</h1>
        <Strider activeIndex={0} transitionSpeed={400}>
          <Step>
            {({ next, goTo, active, hiding, activeIndex }) => (
              <div className={cx('step__wrapper', {
                'is-active': active,
                'is-hiding': hiding
              })}>
                <StepOne next={next} />
              </div>
            )}
          </Step>
          <Step>
            {({ prev, goTo, active, hiding, activeIndex }) => (
              <div className={cx('step__wrapper', {
                'is-active': active,
                'is-hiding': hiding
              })}>
                <StepTwo prev={prev} />
              </div>
            )}
          </Step>
        </Strider>
      </div>
    )
  }
}

class StepOne extends React.Component {
  render () {
    return (
      <div>
        <h4>Step 1</h4>
        <span onClick={() => this.props.next()}>Next</span>
      </div>
    )
  }
}



class StepTwo extends React.Component {
  render () {
    return (
      <div>
        <h4>Step 2</h4>
        <span onClick={() => this.props.prev()}>Previous</span>
      </div>
    )
  }
}

ReactDOM.render(<App />,
  document.getElementById("root")
);