use-the-use-reduced-motion-hook.js

import React from "react";
import useReducedMotion from "./useReducedMotion.js";

export default function App() {
  // Get the recuded motion state from our hook.
  const reducedMotion = useReducedMotion(false);

  return (
    <div className="App">
    
      // Set text according the reduced motion setting.
      <h1>{reducedMotion ? "Do not animate stuff" : "Animate stuff"}</h1>
    
      // Add a class based on the reduced motion setting.
      <div className={"mainclass " + (reducedMotion ? null : "animate")}></div>

    </div>
  );
}