3 files changed, 76 insertions, 0 deletions
diff --git a/src/utils/hooks/use-reduced-motion/index.ts b/src/utils/hooks/use-reduced-motion/index.ts
new file mode 100644
index 0000000..23d9c62
--- /dev/null
+++ b/src/utils/hooks/use-reduced-motion/index.ts
@@ -0,0 +1 @@
+export * from './use-reduced-motion';
diff --git a/src/utils/hooks/use-reduced-motion/use-reduced-motion.test.tsx b/src/utils/hooks/use-reduced-motion/use-reduced-motion.test.tsx
new file mode 100644
index 0000000..6423c4c
--- /dev/null
+++ b/src/utils/hooks/use-reduced-motion/use-reduced-motion.test.tsx
@@ -0,0 +1,66 @@
+import { act, renderHook } from '@testing-library/react';
+import type { FC, ReactNode } from 'react';
+import { MotionProvider, type MotionProviderProps } from '../../providers';
+import { useReducedMotion } from './use-reduced-motion';
+
+const createWrapper = (
+  Wrapper: FC<MotionProviderProps>,
+  config: MotionProviderProps
+) =>
+  function CreatedWrapper({ children }: { children: ReactNode }) {
+    return <Wrapper {...config}>{children}</Wrapper>;
+  };
+
+describe('useReducedMotion', () => {
+  it('should return the default value without provider and prevent update', () => {
+    const { result } = renderHook(() => useReducedMotion());
+
+    expect(result.current.isReduced).toBe(false);
+
+    act(() => result.current.setIsReduced(true));
+
+    expect(result.current.isReduced).toBe(false);
+
+    act(() => result.current.toggleReducedMotion());
+
+    expect(result.current.isReduced).toBe(false);
+  });
+
+  it('can update the value', () => {
+    const defaultValue = true;
+
+    const { result } = renderHook(() => useReducedMotion(), {
+      wrapper: createWrapper(MotionProvider, {
+        attribute: 'aperiam',
+        hasReducedMotion: defaultValue,
+        storageKey: 'voluptate',
+      }),
+    });
+
+    expect(result.current.isReduced).toBe(defaultValue);
+
+    const newValue = false;
+
+    act(() => result.current.setIsReduced(newValue));
+
+    expect(result.current.isReduced).toBe(newValue);
+  });
+
+  it('can toggle the value', () => {
+    const defaultValue = false;
+
+    const { result } = renderHook(() => useReducedMotion(), {
+      wrapper: createWrapper(MotionProvider, {
+        attribute: 'aperiam',
+        hasReducedMotion: defaultValue,
+        storageKey: 'voluptate',
+      }),
+    });
+
+    expect(result.current.isReduced).toBe(defaultValue);
+
+    act(() => result.current.toggleReducedMotion());
+
+    expect(result.current.isReduced).toBe(!defaultValue);
+  });
+});
diff --git a/src/utils/hooks/use-reduced-motion/use-reduced-motion.ts b/src/utils/hooks/use-reduced-motion/use-reduced-motion.ts
new file mode 100644
index 0000000..2937b75
--- /dev/null
+++ b/src/utils/hooks/use-reduced-motion/use-reduced-motion.ts
@@ -0,0 +1,9 @@
+import { useContext } from 'react';
+import { MotionContext } from '../../providers/motion-provider';
+
+export const useReducedMotion = () => {
+  const { isReduced, setIsReduced, toggleReducedMotion } =
+    useContext(MotionContext);
+
+  return { isReduced, setIsReduced, toggleReducedMotion };
+};