react-chrono
Version:
A Modern Timeline component for React
49 lines • 1.23 kB
TypeScript
/**
* usePrefersReducedMotion - Detects user's motion preference
*
* This hook checks the user's `prefers-reduced-motion` media query preference
* and returns a boolean indicating whether reduced motion is preferred.
*
* WCAG References:
* - 2.3.3 Animation from Interactions (Level AAA)
* - WCAG22 Understanding: Respect user preferences for reduced motion
*
* @returns {boolean} true if user prefers reduced motion, false otherwise
*
* @example
* ```typescript
* const prefersReducedMotion = usePrefersReducedMotion();
*
* return (
* <motion.div
* animate={{ opacity: 1 }}
* transition={{
* duration: prefersReducedMotion ? 0 : 0.3,
* type: prefersReducedMotion ? 'tween' : 'spring',
* }}
* >
* Content
* </motion.div>
* );
* ```
*
* @example
* ```typescript
* // Conditional animations
* const prefersReducedMotion = usePrefersReducedMotion();
*
* return (
* <div
* style={{
* transition: prefersReducedMotion
* ? 'none'
* : 'transform 0.3s ease-out',
* }}
* >
* Content
* </div>
* );
* ```
*/
export declare const usePrefersReducedMotion: () => boolean;
//# sourceMappingURL=usePrefersReducedMotion.d.ts.map