@twilentui/hooks v1.0.11

@twilentui/hooks

Installation

yarn add @twilentui/hooks

Import Hooks

import {
  useReducedMotion,
  useQueryState,
  useMediaQuery,
  useHover,
  useLocalStorage,
} from "@twilentui/provider";

Basic Usage

useQueryState

// example.com
const [count, setCount] = useStateQuery < number > ("count", 1);

setCount((n) => Number(n) + 1);
// example.com?count=2

useMediaQuery

const isMobile = useMediaQuery("(max-width: 768px)");
const isTablet = useMediaQuery("(min-width: 769px) and (max-width: 1024px)");
const isDesktop = useMediaQuery("(min-width: 1025px)");
const colorScheme = useMediaQuery("(prefers-color-scheme: dark)");

console.log(isMobile, isTablet, isDesktop, colorScheme ? "dark" : "light"); // false, false, true, dark

useReducedMotion

const isReduced = useReducedMotion();

console.log(isReduced); // false

useHover

const [ref, isHovered] = useHover<HTMLDivElement>();

return (
   <div ref={ref}>
       {isHovered ? "Hovered" : "Not hovered"}
   </div>
);

useLocalStorage

const storage = useLocalStorage();

return (
  <div>
    {storage.has("test")
      ? storage.get("test")
      : storage.set("test", "test")
      ? "Set"
      : "Not set"}
  </div>
);