Discussion on: Reducing Motion to Improve Accessibility

import React, { useState, useEffect } from 'react'

const ReduceToggle = () => {
  const [ checked, setChecked ] = useState(false)

  // componentDidMount()
  useEffect(() => {
    const reduceMotionOn = localStorage.getItem('reduceMotionOn')

    if (typeof reduceMotionOn === 'string') {
      reduceMotionOn = JSON.parse(reduceMotionOn)
    }

    if (reduceMotionOn === null) {
      localStorage.setItem('reduceMotionOn', false)
    }

    setChecked(reduceMotionOn)
  }, [])

  // Handle toggle change
  const toggleChecked = event => {
    localStorage.setItem('reduceMotionOn', event.target.checked)
    setChecked(event.target.checked)
  }

  return (
    <div className="toggle">
      <input id="reduce-motion" type="checkbox" checked={checked} />
      <label htmlFor="reduce-motion">Reduce Motion</label>
    </div>
  )
}

export default ReduceToggle