Data

Tools

Indexes

Applications

Experiments

Awesome

An open API service indexing awesome lists of open source software.

https://github.com/letstri/hookas

Registry for most popular React hooks based on the shadcn/ui.
https://github.com/letstri/hookas

hooks react shadcn

Last synced: about 1 year ago
JSON representation

Registry for most popular React hooks based on the shadcn/ui.

Awesome Lists containing this project

README 

          
# Hookas



Hookas is a comprehensive registry for popular React hooks, inspired by the [shadcn](https://ui.shadcn.com/) registry system. It provides a collection of well-tested, production-ready hooks that solve common React development challenges.



## How to use



Find the hook you want to use and copy the link to install the hook into your project. Please note you should have setup shadcn in your project to use this.



## Hooks



- [useIsOnline](#useisonline) - Monitor network connectivity status with automatic reconnection handling

- [useAsyncEffect](#useasynceffect) - Handle asynchronous operations in React effects

- [useElementSize](#useelementsize) - Track and respond to element dimensions with ResizeObserver

- [useClickOutside](#useclickoutside) - Detect and handle clicks outside specified elements

- [useToggle](#usetoggle) - Manage boolean state with a convenient toggle function

- [useWindowSize](#usewindowsize) - Monitor window dimensions

- [useIsMounted](#useismounted) - Check if the component is mounted

- [useQuery](#usequery) - Lightweight data fetching solution

- [useMediaQuery](#usemediaquery) - Reactively respond to CSS media queries

- [useFullscreen](#usefullscreen) - Control fullscreen mode

- [useMousePosition](#usemouseposition) - Track mouse coordinates

- [useDebouncedCallback](#usedebouncedcallback) - Optimize performance by debouncing function calls

- [useDebouncedMemo](#usedebouncedmemo) - Debounce expensive computations

- [useDebouncedState](#usedebouncedstate) - Manage state with debounced updates

- [useThrottledCallback](#usethrottledcallback) - Control function execution rate with throttling

- [usePromise](#usepromise) - Handle promises without `use` hook

- [useMediaControls](#usemediacontrols) - Control media elements

- [useIsScrolled](#useisscrolled) - Check if an element is scrolled

- [useInterval](#useinterval) - Execute a function repeatedly with a delay

- [useMountEffect](#usemounteffect) - Run an effect only after the component is mounted

- [useIsomorphicEffect](#useisomorphiceffect) - Run an effect on the client and server



### useIsOnline



Check if the user is online.



#### Usage



```tsx

import { useIsOnline } from '@/hookas/use-is-online'



function ConnectionStatus() {

  const isOnline = useIsOnline()

  return 
{isOnline ? 'Online' : 'Offline'}


}

```



#### Install



```bash

npx shadcn@latest add https://hookas.letstri.dev/r/use-is-online.json

```



### useAsyncEffect



Run an async effect.



#### Usage



```tsx

import { useAsyncEffect } from '@/hookas/use-async-effect'

import { useState } from 'react'



function DataFetcher() {

  const [data, setData] = useState(null)



  useAsyncEffect(async () => {

    const res = await fetch('https://api.example.com/data')

    const json = await res.json()

    setData(json)

  }, [])



  return 
{JSON.stringify(data, null, 2)}


}

```



#### Install



```bash

npx shadcn@latest add https://hookas.letstri.dev/r/use-async-effect.json

```



### useElementSize



Measure the size of an element.



#### Usage



```tsx

import { useElementSize } from '@/hookas/use-element-size'

import { useRef } from 'react'



function ResizableBox() {

  const ref = useRef(null)

  const { width, height } = useElementSize(ref)



  return (

    


      


        Width:

        {width}

        px

      


      


        Height:

        {height}

        px

      


    


  )

}

```



#### Install



```bash

npx shadcn@latest add https://hookas.letstri.dev/r/use-element-size.json

```



### useClickOutside



Handle click outside events.



#### Usage



```tsx

import { useClickOutside } from '@/hookas/use-click-outside'

import { useRef, useState } from 'react'



function DropdownMenu() {

  const [isOpen, setIsOpen] = useState(false)

  const ref = useRef(null)



  useClickOutside(ref, () => setIsOpen(false))



  return (

    


       setIsOpen(!isOpen)}>Toggle Menu

      {isOpen && 
Menu Content
}

    


  )

}

```



#### Install



```bash

npx shadcn@latest add https://hookas.letstri.dev/r/use-click-outside.json

```



### useToggle



Toggle a value.



#### Usage



```tsx

import { useToggle } from '@/hookas/use-toggle'



function ToggleButton() {

  const [isOn, toggle] = useToggle(false)



  return (

    


      {isOn ? 'ON' : 'OFF'}

      

        State:

        {isOn ? 'Enabled' : 'Disabled'}

      

    


  )

}

```



#### Install



```bash

npx shadcn@latest add https://hookas.letstri.dev/r/use-toggle.json

```



### useWindowSize



Get the size of the window.



#### Usage



```tsx

import { useWindowSize } from '@/hookas/use-window-size'



function WindowSizeDisplay() {

  const { width, height } = useWindowSize()



  return (

    


      


        Width:

        {width}

        px

      


      


        Height:

        {height}

        px

      


    


  )

}

```



#### Install



```bash

npx shadcn@latest add https://hookas.letstri.dev/r/use-window-size.json

```



### useIsMounted



Check if the component is mounted.



#### Usage



```tsx

import { useIsMounted } from '@/hookas/use-is-mounted'

import { useEffect, useState } from 'react'



function MountStatus() {

  const isMounted = useIsMounted()



  return (

    


      Component is

      {isMounted ? 'mounted' : 'not mounted'}

      !

    


  )

}

```



#### Install



```bash

npx shadcn@latest add https://hookas.letstri.dev/r/use-is-mounted.json

```



### useQuery



Small alternative to @tanstack/react-query.



#### Usage



```tsx

import { useQuery } from '@/hookas/use-query'



function DataFetcher() {

  const { data, error, status, refetch } = useQuery(() => fetch('https://api.example.com/data'))



  return 
{JSON.stringify(data)}


}

```



#### Install



```bash

npx shadcn@latest add https://hookas.letstri.dev/r/use-query.json

```



### useMediaQuery



Check if the browser matches a media query.



#### Usage



```tsx

import { useMediaQuery } from '@/hookas/use-media-query'



function MediaQueryExample() {

  const isMobile = useMediaQuery('(max-width: 768px)')



  return 
{isMobile ? 'Mobile' : 'Desktop'}


}

```



#### Install



```bash

npx shadcn@latest add https://hookas.letstri.dev/r/use-media-query.json

```



### useFullscreen



Handle fullscreen mode.



#### Usage



```tsx

import { useFullscreen } from '@/hookas/use-fullscreen'



function FullscreenExample() {

  const { isFullscreen, toggleFullscreen } = useFullscreen()

}

```



#### Install



```bash

npx shadcn@latest add https://hookas.letstri.dev/r/use-fullscreen.json

```



### useMousePosition



Track the mouse position.



#### Usage



```tsx

import { useMousePosition } from '@/hookas/use-mouse-position'



function MousePosition() {

  const { x, y } = useMousePosition()

}



function MousePosition() {

  const ref = useRef(null)

  const { x, y } = useMousePosition(ref)



  return (

    


      {x}

      {y}

    


  )

}

```



#### Install



```bash

npx shadcn@latest add https://hookas.letstri.dev/r/use-mouse-position.json

```



### useDebouncedCallback



Debounce a callback.



#### Usage



```tsx

import { useDebouncedCallback } from '@/hookas/use-debounced-callback'



function DebouncedCallback() {

  const debouncedFn = useDebouncedCallback((a: number, b: number) => {

    console.log(a, b)

  }, 1000)



  return  debouncedFn(1, 2)}>Debounce

}

```



### useDebouncedMemo



Debounce a memo.



#### Usage



```tsx

import { useDebouncedMemo } from '@/hookas/use-debounced-memo'



function DebouncedMemo() {

  const debouncedMemo = useDebouncedMemo(() => 'Hello', [1, 2, 3], 1000)



  return 
{debouncedMemo}


}

```



#### Install



```bash

npx shadcn@latest add https://hookas.letstri.dev/r/use-debounced-memo.json

```



### useDebouncedState



Debounce a state.



#### Usage



```tsx

import { useDebouncedState } from '@/hookas/use-debounced-state'



function DebouncedState() {

  const [debouncedState, state, setState] = useDebouncedState('Hello', 1000)

}

```



#### Install



```bash

npx shadcn@latest add https://hookas.letstri.dev/r/use-debounced-state.json

```



### useThrottledCallback



Throttle a callback.



#### Usage



```tsx

import { useThrottledCallback } from '@/hookas/use-throttled-callback'



function ThrottledCallback() {

  const throttledFn = useThrottledCallback((a: number, b: number) => {

    console.log(a, b)

  }, 1000)



  return  throttledFn(1, 2)}>Throttle

}

```



#### Install



```bash

npx shadcn@latest add https://hookas.letstri.dev/r/use-throttled-callback.json

```



### usePromise



Handle promises without `use` hook.



#### Usage



```tsx

import { usePromise } from '@/hookas/use-promise'



function PromiseExample() {

  const data = usePromise(() => Promise.resolve([{ name: 'Valerii' }]), [])



  return (

    


      {data.map(item => (

        
{item.name}


      ))}

    


  )

}

```



#### Install



```bash

npx shadcn@latest add https://hookas.letstri.dev/r/use-promise.json

```



### useMediaControls



Control media elements.



#### Usage



```tsx

import { useMediaControls } from '@/hookas/use-media-controls'



function MediaControls() {

  const mediaRef = useRef(null)

  const {

    play,

    pause,

    toggle,

    stop,

    toggleMute,

    setVolume,

    setCurrentTime,

    isPlaying,

    isMuted,

    volume,

    currentTime,

    duration,

  } = useMediaControls(mediaRef)



  return (

    


      

      Play

      Pause

      Toggle

    


  )

}

```



#### Install



```bash

npx shadcn@latest add https://hookas.letstri.dev/r/use-media-controls.json

```



### useIsScrolled



Check if an element is scrolled.



#### Usage



```tsx

import { useIsScrolled } from '@/hookas/use-is-scrolled'



function IsScrolled() {

  const ref = useRef(null)

  const isScrolled = useIsScrolled(ref)



  return 
{isScrolled ? 'Scrolled' : 'Not scrolled'}


}

```



#### Install



```bash

npx shadcn@latest add https://hookas.letstri.dev/r/use-is-scrolled.json

```



### useInterval



Execute a function repeatedly with a delay.



#### Usage



```tsx

import { useInterval } from '@/hookas/use-interval'



function IntervalExample() {

  useInterval(() => console.log('Hello'), 1000)

}

```



#### Install



```bash

npx shadcn@latest add https://hookas.letstri.dev/r/use-interval.json

```



### useMountEffect



Run an effect only after the component is mounted.



#### Usage



```tsx

import { useMountEffect } from '@/hookas/use-mount-effect'



function MountEffect() {

  useMountEffect(() => console.log('Hello'), [])

}

```



#### Install



```bash

npx shadcn@latest add https://hookas.letstri.dev/r/use-mount-effect.json

```



### useIsomorphicEffect



Run an effect on the client and server.



#### Usage



```tsx

import { useIsomorphicEffect } from '@/hookas/use-isomorphic-effect'



function IsomorphicEffect() {

  useIsomorphicEffect(() => {

    console.log('Hello')

  }, [])

}

```



#### Install



```bash

npx shadcn@latest add https://hookas.letstri.dev/r/use-isomorphic-effect.json

```