Skip to content

Instantly share code, notes, and snippets.

@vanaf1979
Last active August 30, 2020 12:31
Show Gist options
  • Save vanaf1979/5cc5d4c4febeadae905264de9df7c514 to your computer and use it in GitHub Desktop.
Save vanaf1979/5cc5d4c4febeadae905264de9df7c514 to your computer and use it in GitHub Desktop.
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>
);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment