Shak Hooks

A collection of modern, server-safe React hooks. Simplify your component logic and boost development speed.

npx shak-hooks add <hook>

✔ Initialized shak-hooks
✔ Installed @shak-hooks/usehooks
✔ Installed @shak-hooks/usehooks-vue
✔ Installed @shak-hooks/usehooks-angular

Why Shak Hooks?

Optimized Performance

Hooks are designed for efficiency, ensuring your React applications run smoothly and without unnecessary re-renders.

Server-Safe

Built with universal environments in mind, our hooks are safe to use in both client-side and server-side rendering contexts.

Developer Friendly

Intuitive APIs and clear documentation make integration a breeze, speeding up your development workflow.

Real-time Data

Effortlessly manage and synchronize real-time data with robust and reliable state management solutions.

Clean Code

Promotes modular and reusable logic, leading to cleaner, more maintainable, and scalable component code.

Boost Productivity

Accelerate your development cycle by leveraging pre-built, tested hooks for common React patterns.

useLocalStorage

State

Sync state to local storage so that it persists through a page refresh.

import { useState, useEffect } from "react";

export function useLocalStorage<T>(key: string, initialValue: T) {
  const [storedValue, setStoredValue]...

useWindowSize

Browser

Track the dimensions of the browser window.

import { useState, useEffect } from "react";

export function useWindowSize() {
  const [windowSize, setWindowSize] = useState({
    width: typeof win...

useDebounce

Utility

Debounce a value to prevent frequent updates.

import { useState, useEffect } from "react";

export function useDebounce<T>(value: T, delay: number): T {
  const [debouncedValue, setDebouncedValue]...

useOnClickOutside

Sensor

Detect clicks outside of a specified element.

import { useEffect, RefObject } from "react";

export function useOnClickOutside<T extends HTMLElement = HTMLElement>(
  ref: RefObject<T>,
  handler:...

useFetch

Network

A simple hook for fetching data.

import { useState, useEffect } from "react";

export function useFetch<T = unknown>(url: string, options?: RequestInit) {
  const [data, setData] = us...

useCopyToClipboard

Utility

Copy text to the user's clipboard.

import { useState } from "react";

export function useCopyToClipboard() {
  const [copiedText, setCopiedText] = useState<string | null>(null);

  cons...

useMediaQuery

Browser

Easily retrieve and monitor the state of a CSS media query.

import { useState, useEffect } from "react";

export function useMediaQuery(query: string): boolean {
  const [matches, setMatches] = useState(false);...

usePrevious

State

Track the previous value of a variable.

import { useEffect, useRef } from "react";

export function usePrevious<T>(value: T): T | undefined {
  const ref = useRef<T>();

  useEffect(() => {
...

useIntersectionObserver

Sensor

Observe when an element enters or leaves the viewport.

import { useEffect, useRef, useState } from "react";

export function useIntersectionObserver(
  elementRef: React.RefObject<Element>,
  {
    thresho...

useNetworkState

Network

Track the network connection status.

import { useEffect, useState } from "react";

interface NetworkState {
  online: boolean;
  since?: Date;
  downlink?: number;
  downlinkMax?: number;...

useOrientation

Sensor

Track the device orientation.

import { useEffect, useState } from "react";

interface OrientationState {
  angle: number;
  type: string;
}

export function useOrientation(): Orien...

useSessionStorage

State

Sync state to session storage.

import { useState, useEffect } from "react";

export function useSessionStorage<T>(key: string, initialValue: T) {
  const [storedValue, setStoredValu...

usePreferredLanguage

Browser

Get the user's preferred language.

import { useSyncExternalStore } from "react";

const subscribe = (cb: () => void) => {
  window.addEventListener("languagechange", cb);
  return () =>...

useContinuousRetry

Utility

Continuously retry a function until it succeeds.

import { useState, useEffect, useRef } from "react";

export function useContinuousRetry(
  callback: () => boolean,
  interval: number = 100,
  maxRe...

useVisibilityChange

Sensor

Track document visibility state.

import { useEffect, useState } from "react";

export function useVisibilityChange() {
  const [isVisible, setIsVisible] = useState(true);

  useEffect...

useScript

Utility

Dynamically load an external script.

import { useState, useEffect } from "react";

export type Status = "idle" | "loading" | "ready" | "error";

export function useScript(src: string): St...

useRenderInfo

Utility

Log render information for debugging.

import { useEffect, useRef } from "react";

export function useRenderInfo(name: string = "Component") {
  const count = useRef(0);
  const lastRender ...

useRenderCount

Utility

Count component renders.

import { useEffect, useRef } from "react";

export function useRenderCount() {
  const count = useRef(1);

  useEffect(() => {
    count.current++;
  ...

useRandomInterval

Utility

Execute a callback at random intervals.

import { useEffect, useRef, useCallback } from "react";

const random = (min: number, max: number) =>
  Math.floor(Math.random() * (max - min)) + min;...

useIntervalWhen

Utility

Set an interval that can be paused.

import { useEffect, useRef } from "react";

export function useIntervalWhen(
  callback: () => void,
  delay: number,
  when: boolean = true
) {
  con...

useInterval

Utility

Declarative setInterval.

import { useEffect, useRef } from "react";

export function useInterval(callback: () => void, delay: number | null) {
  const savedCallback = useRef(c...

useLockBodyScroll

Browser

Prevent scrolling of the body element.

import { useLayoutEffect } from "react";

export function useLockBodyScroll() {
  useLayoutEffect(() => {
    const originalStyle = window.getComputed...

useCountdown

Utility

A simple countdown timer.

import { useState, useEffect } from "react";

export function useCountdown(targetDate: Date) {
  const countDownDate = new Date(targetDate).getTime();...

useIsClient

Utility

Check if the code is running on the client.

import { useState, useEffect } from "react";

export function useIsClient() {
  const [isClient, setIsClient] = useState(false);

  useEffect(() => {
...

useQueue

State

Manage a queue of items.

import { useState } from "react";

export function useQueue<T>(initialValue: T[] = []) {
  const [queue, setQueue] = useState<T[]>(initialValue);

  c...

useHover

Sensor

Detect if an element is being hovered.

import { useState, useRef, useEffect } from "react";

export function useHover<T extends HTMLElement = HTMLElement>() {
  const [value, setValue] = us...

useTimeout

Utility

Declarative setTimeout.

import { useEffect, useRef } from "react";

export function useTimeout(callback: () => void, delay: number | null) {
  const savedCallback = useRef(ca...

useEventListener

Browser

Add an event listener to an element.

import { useEffect, useRef } from "react";

export function useEventListener(
  eventName: string,
  handler: (event: Event) => void,
  element: HTMLE...

useKeyPress

Sensor

Detect when a specific key is pressed.

import { useState, useEffect } from "react";

export function useKeyPress(targetKey: string) {
  const [keyPressed, setKeyPressed] = useState(false);
...

useMap

State

Manage a Map state.

import { useState, useCallback } from "react";

export function useMap<K, V>(initialValue: Map<K, V> = new Map()) {
  const [map, setMap] = useState(i...

useThrottle

Utility

Throttle a value.

import { useState, useEffect, useRef } from "react";

export function useThrottle<T>(value: T, interval: number = 500): T {
  const [throttledValue, s...

useSet

State

Manage a Set state.

import { useState, useCallback } from "react";

export function useSet<T>(initialValue: Set<T> = new Set()) {
  const [set, setSet] = useState(initial...

useBattery

Sensor

Track battery status.

import { useState, useEffect } from "react";

interface BatteryState {
  supported: boolean;
  loading: boolean;
  level: number | null;
  charging: b...

useIdle

Sensor

Detect if the user is idle.

import { useState, useEffect } from "react";

export function useIdle(ms: number = 3000) {
  const [idle, setIdle] = useState(false);

  useEffect(() ...

useToggle

State

Toggle a boolean value.

import { useState, useCallback } from "react";

export function useToggle(initialValue: boolean = false) {
  const [value, setValue] = useState(initia...

useHistoryState

State

Manage state with history (undo/redo).

import { useState, useCallback } from "react";

export function useHistoryState<T>(initialValue: T) {
  const [state, setState] = useState(initialValu...

useGeolocation

Sensor

Track user geolocation.

import { useState, useEffect } from "react";

interface GeolocationState {
  loading: boolean;
  accuracy: number | null;
  altitude: number | null;
 ...

usePageLeave

Sensor

Detect when the mouse leaves the page.

import { useEffect } from "react";

export function usePageLeave(onPageLeave: () => void) {
  useEffect(() => {
    const handleMouseLeave = (event: M...

useObjectState

State

Manage object state with partial updates.

import { useState, useCallback } from "react";

export function useObjectState<T>(initialValue: T) {
  const [state, setState] = useState(initialValue...

useLogger

Utility

Log component lifecycle events.

import { useEffect } from "react";

export function useLogger(name: string, ...rest: any[]) {
  useEffect(() => {
    console.log(`${name} mounted`, ....

useDocumentTitle

Browser

Update the document title.

import { useEffect } from "react";

export function useDocumentTitle(title: string) {
  useEffect(() => {
    document.title = title;
  }, [title]);
}...

useIsFirstRender

Utility

Check if it's the first render.

import { useRef } from "react";

export function useIsFirstRender(): boolean {
  const isFirst = useRef(true);

  if (isFirst.current) {
    isFirst.c...

useLongPress

Sensor

Detect long press events.

import { useCallback, useRef, useState } from "react";

export function useLongPress(
  onLongPress: () => void,
  onClick: () => void,
  { shouldPrev...

useFavicon

Browser

Dynamically update the favicon.

import { useEffect } from "react";

export function useFavicon(href: string) {
  useEffect(() => {
    const link: HTMLLinkElement =
      document.qu...

useDefault

State

Return a default value if the state is null or undefined.

import { useState } from "react";

export function useDefault<T>(initialValue: T, defaultValue: T) {
  const [state, setState] = useState<T | undefine...

useWindowScroll

Browser

Track window scroll position.

import { useState, useEffect } from "react";

export function useWindowScroll() {
  const [state, setState] = useState({ x: 0, y: 0 });

  useEffect((...

useMeasure

Browser

Measure an element's dimensions.

import { useState, useRef, useEffect } from "react";

export function useMeasure() {
  const ref = useRef<HTMLElement>(null);
  const [rect, setRect] ...

useClickAway

Sensor

Detect clicks outside of an element.

import { useEffect, useRef } from "react";

export function useClickAway(
  ref: React.RefObject<HTMLElement>,
  handler: (event: MouseEvent | TouchEv...

useList

State

Manage a list state.

import { useState, useCallback } from "react";

export function useList<T>(initialValue: T[] = []) {
  const [list, setList] = useState(initialValue);...

useCounter

State

Manage a counter state.

import { useState, useCallback } from "react";

export function useCounter(initialValue: number = 0) {
  const [count, setCount] = useState(initialVal...

useMouse

Sensor

Track mouse position.

import { useState, useEffect } from "react";

export function useMouse() {
  const [state, setState] = useState({ x: 0, y: 0, elementX: 0, elementY: 0...

Shak Hooks

Why Shak Hooks?

Let‘s do great work together

Stay in the loop