Unverified Commit 59ae517a authored by Douglas Fabris's avatar Douglas Fabris Committed by GitHub

feat: usePrefersReducedData hook (#340)

parent 475ae342
......@@ -66,6 +66,7 @@ yarn add @rocket.chat/fuselage-hooks
- [Parameters](#parameters-10)
- [usePosition](#useposition)
- [Parameters](#parameters-11)
- [usePrefersReducedData](#useprefersreduceddata)
- [usePrefersReducedMotion](#useprefersreducedmotion)
- [useResizeObserver](#useresizeobserver)
- [Parameters](#parameters-12)
......@@ -227,6 +228,12 @@ Hook to deal and position an element using an anchor
Returns **PositionResult** The style containing top and left position
### usePrefersReducedData
Hook to get the prefers-reduce-data value.
Returns **[boolean](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean)** `true` if the prefers-reduce-data is set reduce in the media queries that matches
### usePrefersReducedMotion
Hook to get the prefers-reduce-motion value.
......
......@@ -34,6 +34,7 @@
| [useMergedRefs](./fuselage-hooks.usemergedrefs.md) | Hook to merge refs and callbacks refs into a single callback ref. Useful when your component need a internal ref while receiving a forwared ref. |
| [useMutableCallback](./fuselage-hooks.usemutablecallback.md) | Hook to create a stable callback from a mutable one. |
| [usePosition](./fuselage-hooks.useposition.md) | Hook to deal and position an element using an anchor |
| [usePrefersReducedData](./fuselage-hooks.useprefersreduceddata.md) | Hook to get the prefers-reduce-data value. |
| [usePrefersReducedMotion](./fuselage-hooks.useprefersreducedmotion.md) | Hook to get the prefers-reduce-motion value. |
| [useResizeObserver](./fuselage-hooks.useresizeobserver.md) | Hook to track dimension changes in a DOM element using the ResizeObserver API. |
| [useSafely](./fuselage-hooks.usesafely.md) | Hook that wraps pairs of state and dispatcher to provide a new dispatcher which can be safe and asynchronically called even after the component unmounted. |
......
<!-- Do not edit this file. It is automatically generated by API Documenter. -->
[Home](./index.md) &gt; [@rocket.chat/fuselage-hooks](./fuselage-hooks.md) &gt; [usePrefersReducedData](./fuselage-hooks.useprefersreduceddata.md)
## usePrefersReducedData variable
Hook to get the prefers-reduce-data value.
<b>Signature:</b>
```typescript
usePrefersReducedData: () => boolean
```
......@@ -12,6 +12,7 @@ export * from './useMediaQuery';
export * from './useMergedRefs';
export * from './useMutableCallback';
export * from './usePosition';
export * from './usePrefersReducedData';
export * from './usePrefersReducedMotion';
export * from './useResizeObserver';
export * from './useSafely';
......
/**
* @jest-environment node
*/
import { FunctionComponent, createElement, StrictMode } from 'react';
import { renderToString } from 'react-dom/server';
import { usePrefersReducedData } from '.';
describe('usePrefersReducedData hook on server', () => {
it('should return false without matchMedia mocked', () => {
let matches: boolean;
const TestComponent: FunctionComponent = () => {
matches = usePrefersReducedData();
return null;
};
renderToString(createElement(StrictMode, {}, createElement(TestComponent)));
expect(matches).toBe(false);
});
it('should return false with matchMedia mocked', () => {
let matches: boolean;
const TestComponent: FunctionComponent = () => {
matches = usePrefersReducedData();
return null;
};
renderToString(createElement(StrictMode, {}, createElement(TestComponent)));
expect(matches).toBe(false);
});
});
import { createElement, FunctionComponent, StrictMode } from 'react';
import { render } from 'react-dom';
import { act } from 'react-dom/test-utils';
import { usePrefersReducedData } from '.';
import matchMediaMock from './__mocks__/matchMedia';
describe('usePrefersReducedData hook', () => {
let container: HTMLDivElement;
beforeEach(() => {
container = document.createElement('div');
document.body.appendChild(container);
});
afterEach(() => {
container.remove();
container = null;
});
it('should return false on the initial call', () => {
let matches: boolean;
const TestComponent: FunctionComponent = () => {
matches = usePrefersReducedData();
return null;
};
act(() => {
render(
createElement(StrictMode, {}, createElement(TestComponent)),
container
);
});
expect(matches).toBe(false);
});
it('should returns true with matchMedia mocked', () => {
window.matchMedia = jest.fn((media) =>
matchMediaMock(media, '(prefers-reduced-data: reduce)')
);
let matches: boolean;
const TestComponent: FunctionComponent = () => {
matches = usePrefersReducedData();
return null;
};
act(() => {
render(
createElement(StrictMode, {}, createElement(TestComponent)),
document.createElement('div')
);
});
expect(matches).toBe(true);
});
});
import { useMediaQuery } from '.';
/**
* Hook to get the prefers-reduce-data value.
*
* @returns `true` if the prefers-reduce-data is set reduce in the media queries that matches
* @public
*/
export const usePrefersReducedData = (): boolean =>
useMediaQuery('(prefers-reduced-data: reduce)');
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment