react hooks helper package
npm install @w2solutions/react-hooks
This package includes a set of usefull React hooks.
- Install
- Hooks
- useAsync
- useDebounceEffect
- useFileSelect
- useFormFields
- usePrevious
- useScrollPosition
npm i @w2solutions/react-hooks`
$3
`yarn add @w2solutions/react-hooks`
Hooks
useAsync(callback)
useAsync hook lets you call asynchronous functions nice and easy.
#### Input
`javascript
callback: (...args: A) => Promise
`
#### Output
`javascript
[
(...args: A) => void,
{
data: R | null,
error: Error | null,
loading: boolean,
calledOnce: boolean
}
]
`
#### Example
`javascript
import { useAsync } from "@w2solutions/react-hooks"const AsyncInvocation = () => {
const [fetchProfile, data] = useAsync(API.fetchProfile)
return (
<>
{data.loading &&
Loading...}
Profile data: {data.data}
{data.error && Error: {data.error}}
>
)
}
`>Note:
API.fetchProfile should be a callback function, otherwise Maximum update depth exceeded error is raised.
useDebounceEffect(callback, delay, dependencyArray)
useDebounceEffect invokes a callback function after a given delay if any item in the dependency array has been changed.
#### Input
`javascript
callback: EffectCallback
delay: number
dependencyArray?: DependencyList
`
#### Example
`javascript
import { useDebounceEffect } from "@w2solutions/react-hooks"const DebounceEffect = () => {
const [counter, setCounter] = useState(1)
const [debouncedCounter, setDebouncedCounter] = useState(1)
const square = () => {
setDebouncedCounter(counter**2)
}
useDebounceEffect(square, 300, [counter])
return (
<>
{counter}
{debouncedCounter}
>
)
}
`
>300 ms after the button is clicked, the function square is invoked.
useFileSelect(options)
useFileSelect selects the file(s) and returns a promise, which resolves with a FileList.
#### Input
`javascript
options: {
multiple: boolean,
accept: string
}
`
#### Output
`javascript
() => Promise
`
#### Example
`javascript
import { useFileSelect } from "@w2solutions/react-hooks"const FileSelector = () => {
const selectFiles = useFileSelect(
{multiple: false, accept: ".txt"}
)
const [fileName, setFileName] = useState(null)
const handleClick = async () => {
const files = await selectFiles()
setFileName(files[0].name)
}
return (
<>
Selected file: {fileName}
>
)
}
`
> useFileSelect creates an asynchronous function selectFiles, which accepts 1 .txt file in this case and resolves with FileList. See for more info on FileList.
useFormFields(initialValues, options)
useFormFields builds binding objects for input fields initialized with initialValues. Additionally the hook returns the current values of input fields, the boolean, which tells you if the form has been changed compared to the initial state, a reset function and a setValue function. ResetOnInitialValueChange boolean decides if the form should be reseted to new inital values (if they have been changed) and hence set the isDirty flag to false.
#### Input
`javascript
initialValues = {
[key: string]: any
}
options = {
resetOnInitialValueChange?: boolean
}
`
#### Output
`javascript
{
bindings: {
[key in keyof initialValues]: {
{
name: string,
value: initialValues[key],
onChange?: ChangeEventHandler
}
}
},
values: {
[key in keyof initialValues]: initialValue[key]
},
isDirty: boolean,
reset: () => void,
setValue: (key, value) => void
}
`
#### Example
`javascript
import { useFormFields } from "@w2solutions/react-hooks"const Form = () => {
const { bindings, reset, setValue } = useFormFields(
{color: '', shape: ''}
)
return (
)
}
`
>Take your time to play with the parameters so that they work the way you want!
usePrevious
usePrevious returns a previous value of .current property of a ref object.
#### Input
`javascript
value: T
`
#### Output
`javascript
T
`
#### Example
`javascript
import { usePrevious } from "@w2solutions/react-hooks"const CurrentAndPreviousValues = () => {
const [counter, setCounter] = useState(0)
const previousCounter = usePrevious(counter)
return (
<>
{counter}
{prevCounter}
>
)
}
`
useScrollPosition(options)
useScrollPosition returns current pageXOffset and pageYOffset, updated throttle milliseconds after the scroll event has occured. If within the update time another scroll event happens, the position is going to be updated only after the timer of the latest event runs out.
#### Input
`javascript
options = {
throttle?: number
}
`
#### Output
`javascript
position = {
x: number,
y: number
}
`
#### Example
`javascript
import { useScrollPosition } from "@w2solutions/react-hooks"const ScrollPosition = () => {
const currentPosition = useScrollPosition({throttle: 50})
return (
style={{
position: "absolute",
left: currentPosition.x,
top: currentPosition:y
}}
>
(x: {currentPosition.x}, y: {currentPosition.y})
>We place a big div container into the page, so that we can scroll a bit.
useScrollPosition hook updates the currentPosition` variable 50 ms after the scroll event stops.