@jbonigomes/create-react-slides/src/components/Presentation/index.js

React presentation deck framework heavily inspired by Impress.js

import React, { useEffect } from 'react'
import ReactCSSTransitionGroup from 'react-addons-css-transition-group'

import { throttle } from 'lodash'
import { connect } from 'react-redux'

import Clock from '../Clock'
import styles from './index.scss'

import { routes } from '../../routes'

const mapStateToProps = (state) => ({
  slide: state.slide,
  direction: state.slide > state.previous ? 'Forward' : 'Backward',
})

const mapDispatchToProps = (dispatch) => ({
  next: () => dispatch({ type: 'next' }),
  back: () => dispatch({ type: 'back' }),
})

const Presentation = ({ back, next, slide, direction }) => {
  useEffect(() => {
    const handler = throttle((e) => {
      if (e.keyCode === 37) {
        back()
      }

      if (e.keyCode === 39 || e.keyCode === 32) {
        next()
      }
    }, 500)

    document.addEventListener('keydown', handler)

    return () => document.removeEventListener('keydown', handler)
  }, [])

  return (
    <>
      <ReactCSSTransitionGroup
        className={styles.wrapper}
        transitionEnterTimeout={500}
        transitionLeaveTimeout={500}
        transitionName={{
          leave: styles[`leave${direction}`],
          enter: styles[`enter${direction}`],
          enterActive: styles[`enterActive${direction}`],
          leaveActive: styles[`leaveActive${direction}`],
        }}
      >
        <div key={slide}>{routes[slide]}</div>
      </ReactCSSTransitionGroup>
      <Clock minutes={5} />
    </>
  )
}

export default connect(
  mapStateToProps,
  mapDispatchToProps,
)(Presentation)