A collection of reusable hooks
npm install @opendevtools/hooksThis is a collection of hooks that we can reuse for any project that needs them. It's also a source of use cases of React Hooks and how to test them using react-testing-library.
``bash`
npm install @opendevtools/hooks
- useToggle
- useQueryParams
- useQueryParam
- useDebounce
- useLocalStorage
- useStorage
---
Uses useState but returns a setter function that toggles the value.
`js`
useToggle(initialValue: boolean): [boolean, () => void]
#### Example
`js
import React from 'react'
import { useToggle } from '@opendevtools/hooks'
export const ToggleComponent = () => {
const [isAlive, toggleValue] = useToggle(false)
return
}
`
Gets all the query param values
`js`
useQueryParams(): { [key: string]: string |Â string[] | undefined }
#### Example
`js
// https://awesome.domain/?name=cookie&lastName=monster
import React from 'react'
import { useQueryParams } from '@opendevtools/hooks'
export const NeedsABunchOfParams = () => {
const params = useQueryParams()
console.log(params)
// { name: 'cookie', lastName: 'monster' }
return null
}
`
Gets a value from a specified query param, useful if you only require one value
out of a bunch. Uses useQueryParams under the hood.
`js`
useQueryParam(param: string): string | string[]
#### Example
`js
import React from 'react'
import { useQueryParam } from '@opendevtools/hooks'
export const NeedsAParam = () => {
const param = useQueryParam('sweetParam')
return (
: Woah! A bunch of params ${param.join(',')}}
$3
Debounce the updating of a value
`js
useDebounce(value: ValueType, duration: number): ValueType
`#### Example
`js
import React from 'react'
import { useDebounce } from '@opendevtools/hooks'export const Debounced = () => {
const [inputValue, setInputValue] = React.useState('')
const debouncedValue = useDebounce(inputValue, 300)
const handleChange = (e) => {
setInputValue(e.currentTarget.value)
}
return (
{debouncedValue}
)
}
`$3
Get and set values in
localStorage. Uses useStorage under the hood.`js
useLocalStorage(key: string, initialValue?: any): [string, (newValue: string) => void]
`#### Example
`js
import React from 'react'
import { useLocalStorage } from '@opendevtools/hooks'export const Storage = ({ initialValue }) => {
const [value, setValue] = useLocalStorage('storedValue', initialValue)
return (
{value ? value : 'no value ;('}
id="store"
onChange={(e) => setValue(e.currentTarget.value)}
type="text"
value={value}
/>
)
}
`$3
Get and set values in any store with a
getItem or setItem. Defaults to
localStorage. Useful if you want to add something to for example sessionStorage.`js
useStorage(key: string, options?: { initialValue?: any, store?: Storage }): [string, (newValue: string) => void]
`#### Example
`js
import React from 'react'
import { useStorage } from '@opendevtools/hooks'export const Storage = ({ initialValue }) => {
const [value, setValue] = useStorage('storedValue', {
initialValue,
store: sessionStorage,
})
return (
{value ? value : 'no value ;('}
id="store"
onChange={(e) => setValue(e.currentTarget.value)}
type="text"
value={value}
/>
)
}
``