Hooks

This 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.

Installation

``bash
npm install @opendevtools/hooks
`

Available Hooks

- useToggle
- useQueryParams
- useQueryParam
- useDebounce
- useLocalStorage
- useStorage

---

$3

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 {isAlive ? '🚀' : '😴'}
}
`

$3

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
}
`

$3

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 (


`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 (


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 (


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 (