https://github.com/givensuman/hookmart
Stupid simple collection of common use-case React hooks
https://github.com/givensuman/hookmart
hooks react typescript
Last synced: 2 months ago
JSON representation
Stupid simple collection of common use-case React hooks
- Host: GitHub
- URL: https://github.com/givensuman/hookmart
- Owner: givensuman
- Created: 2022-02-12T21:48:38.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2023-02-21T21:42:14.000Z (over 2 years ago)
- Last Synced: 2025-03-04T22:46:58.083Z (3 months ago)
- Topics: hooks, react, typescript
- Language: TypeScript
- Homepage:
- Size: 194 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
🦜 hookmart
---
_Warning_: You probably don't need this library. If you're looking for third-party React hooks, check out the [ts-hooks](https://www.npmjs.com/package/usehooks-ts) library first!
hookmart is a collection of React hooks that have common use-cases. Each hook is lightweight and tested.
To install, run:
```bash
# npm
npm i --save hookmart
# or, with yarn
yarn add hookmart
# or, better yet, with pnpm
pnpm i hookmart
```
### Contents:
### useBoolean
Takes an optional initial boolean value and returns a boolean `state` variable with modifying functions `setTrue`, `setFalse`, and `toggle`. Returns are *named*.
Example usage:
```js
import React from 'react'
import { useBoolean } from 'hookmart'
const TrueOrFalse = () => {
const {
state, setTrue, setFalse, toggle
} = useBoolean(true)
return (
<>
{state &&
Hi, mom! 👋
}
Show
Hide
Toggle
>
)
}
```
### useClipboard
Returns an array with the `clipboard` state variable and a `copy` function that writes to clipboard. Note that the state only tracks what is copied with the supplied `copy` function.
Example usage:
```js
import React from 'react'
import { useClipboard } from 'hookmart'
const CopyMe = () => {
const [ text, copyText ] = useClipboard()
const [ input, setInput ] = React.useState('')
return (
<>
setInput(e.target.value)}
/>
{
copyText(input)
alert('Busted!')
}}
>
Pssst... copy me! 📝
>
)
}
```
### useEventListener
Attaches the supplied event trigger and callback to the supplied target. If no target is supplied, it defaults to `window`. Fairly standard JavaScript, but useful as it contains state checking and cleanup.
Example usage:
```js
import React from 'react'
import { useEventListener } from 'hookmart'
const PokeyStick = () => {
const ref = React.useRef()
useEventListener(
'click',
() => alert('Ouch!'),
ref.current
)
return (
Don't poke me! 👈
)
}
```
### useGeolocation
Returns coordinates from the `navigator.geolocation` object.
Example usage:
```js
import React from 'react'
import { useGeolocation } from 'hookmart'
const LatLong = () => {
const coords = useGeolocation()
return (
<>
I know where you live!
Latitude: {coords?.latitude}
Longitude: {coords?.longitude}
>
)
}
```
### useHover
Takes an input target and optional callbacks for `mouseover` and `mouseout` events, and returns a boolean of the hover state.
Example usage:
```js
import React from 'react'
import { useHover } from 'hookmart'
const HoverHand = () => {
const ref = React.useRef()
const hoverState = useHover(
ref.current,
() => alert('Glad you arrived!'),
() => alert('Sorry to see you go.')
)
return (
There's a party in here! 💃
)
}
```
### useInterval
Creates a `setInterval` from the supplied callback and delay (in milliseconds).
Example usage:
```js
import React from 'react'
import { useInterval } from 'hookmart'
const GrowShrink = () => {
const [ grow, setGrow ] = React.useState(false)
useInterval(() => setGrow(state => !state), 1000)
return (
{grow ? '🖐' : '🤏'}
)
}
```
### useLocalStorage
Returns an array with access to the state of a supplied localstorage key and a setter function to update it. Note that the state only tracks what is set to localstorage with the supplied setter function. Also takes an optional initial value (default `null`) to use if there is no item at the supplied key.
Example usage:
```js
import React from 'react'
import { useLocalStorage } from 'hookmart'
const Theme = () => {
const [ theme, setTheme ] = useLocalStorage('theme', 'light')
return (
setTheme('light')}
>
Light theme 🌻
setTheme('dark')}
>
Dark theme 🦇
)
}
```
### useOrientation
Returns the state of the `window.screen.orientation` object.
Example usage:
```js
import React from 'react'
import { useOrientation } from 'hookmart'
const Somersault = () => {
const orientation = useOrientation()
if (orientation.type === ('landscape-primary' || 'landscape-secondary')) {
return
What a beautiful landscape 🦋
} else if (orientation.type === ('portrait-primary' || 'portrait-secondary')) {
return WORLD STAR 💯
} else {
return What are you using, a smart fridge?
}
}
```
### useParams
Pulls query parameters from an optional supplied URL string. If one isn't supplied, it uses `window.location.href`.
Example usage:
```js
import React from 'react'
import { useParams } from 'hookmart'
const HowDidIGetHere = () => {
const params = useParams()
return (
<>
You passed these parameters 🦆:
{Object.entries(params).map((item, index) => (
{item[0]} | {item[1]}
))}
>
)
}
```
### useTimeout
Creates a `setTimeout` from the supplied callback and delay (in milliseconds). If no delay is provided, it defaults to 0.
Example usage:
```js
import React from 'react'
import { useTimeout } from 'hookmart'
const ComedicTiming = () => {
useTimeout(() => alert('He was outstanding in his field!'), 1000)
return (
Why did the scarecrow win an award? 🌽
)
}
```
### useWindowDimensions
Returns the state of the window's dimensions in `width` and `height`. Returns are *named*.
Example usage:
```js
import React from 'react'
import { useWindowDimensions } from 'hookmart'
const WhichIsBigger = () => {
const { width, height } = useWindowDimensions()
if (width > height) {
return
CAUTION: Wide Load 🚚
} else if (height > width) {
return How's the weather up there? ⛅
} else {
return A perfect square!
}
}
```