logoreactuses

usePreferredContrast

prefers-contrast media query.

Usage

import { usePreferredContrast } from "@reactuses/core";

const Demo = () => {
  const contrast = usePreferredContrast();

  return <div>PreferredContrast: {contrast}</div>;
};

The defaultState? parameter must be set when using server side rendering, we need it to keep consistency in client side and server side.

Example

PreferredContrast: no-preference

Type Declarations

export type Contrast = "more" | "less" | "custom" | "no-preference"
export default function usePreferredContrast(defaultState?: Contrast): Contrast