@w2solutions/react-hooks v0.1.8

@w2solutions/react-hooks

This package includes a set of usefull React hooks.

Table of contents

• Install
• Hooks - useAsync - useDebounceEffect - useFileSelect - useFormFields - usePrevious - useScrollPosition

Install

npm

npm i @w2solutions/react-hooks

Yarn

yarn add @w2solutions/react-hooks

Hooks

useAsync<A, R>(callback)

useAsync hook lets you call asynchronous functions nice and easy.

Input

callback: (...args: A) => Promise<R>

Output

[
	(...args: A) => void,
	{
		data: R | null,
		error: Error | null,
		loading: boolean,
		calledOnce: boolean
	}
]

Example

import { useAsync } from "@w2solutions/react-hooks"

const AsyncInvocation = () => {

	const [fetchProfile, data] = useAsync(API.fetchProfile)

	return (
		<>
			<button disabled={data.calledOnce} onClick={fetchProfile}>
				Fetch profile asynchronously
			</button>
			{data.loading && <div>Loading...</div>}
			<div>Profile data: {data.data}</div>
			{data.error && <div>Error: {data.error}</div>}
		</>
	)
}

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

callback: EffectCallback
delay: number
dependencyArray?: DependencyList

Example

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 (
		<>
			<button onClick={() => setCounter(counter + 1)}>
				Counter +1
			</button>
			<div>{counter}</div>
			<div>{debouncedCounter}</div>
		</>
	)
}

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

options: {
	multiple: boolean,
	accept: string
}

Output

() => Promise<FileList>

Example

import { useFileSelect } from "@w2solutions/react-hooks"

const FileSelector = () => { const selectFiles = useFileSelect( {multiple: false, accept: ".txt"} )

const [fileName, setFileName] = useState<string | null>(null)

const handleClick = async () => {
	const files = await selectFiles()
	setFileName(files[0].name)
}

return (
	<>
		<button onClick={handleClick}>
			Select files
		</button>
		<div>Selected file: {fileName}</div>
	</>
)

}

> `useFileSelect` creates an asynchronous function `selectFiles`, which accepts 1 .txt file in this case and resolves with `FileList`. See for more info on [FileList](https://developer.mozilla.org/en-US/docs/Web/API/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

{
	bindings: {
		[key in keyof initialValues]: {
			{
				name: string,
				value: initialValues[key],
				onChange?: ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement>
			}
		}
	},
	values: {
		[key in keyof initialValues]: initialValue[key]
	},
	isDirty: boolean,
	reset: () => void,
	setValue: (key, value) => void
}

Example

import { useFormFields } from "@w2solutions/react-hooks"

const Form = () => {
	const { bindings, reset, setValue } = useFormFields(
		{color: '', shape: ''}
	)

	return (
		<form>
			<input {...bindings.color} type="text"  />
			<input {...bindings.shape} type="text"/>
		    <button onClick={() => setValue('color', 'red')}>
			    Set color
		    </button>
		    <button onClick={reset}>Reset</button>
		</form>
	)
}

Take your time to play with the parameters so that they work the way you want!

usePrevious<SomeType>(value)

usePrevious returns a previous value of .current property of a ref object.

Input

value: T

Output

T

Example

import { usePrevious } from "@w2solutions/react-hooks"

const CurrentAndPreviousValues = () => { const counter, setCounter = useState(0) const previousCounter = usePrevious(counter)

return (
	<>
		<button onClick{()=>setCounter(counter+1)}>
			Counter +1
		</button>
		<div>{counter}</div>
		<div>{prevCounter}</div>
	</>
)

}

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

position = {
	x: number,
	y: number
}

Example

import { useScrollPosition } from "@w2solutions/react-hooks"

const ScrollPosition = () => {
	const  currentPosition = useScrollPosition({throttle: 50})

	return (
		<div style={{height: "20000px"}}>
			<div 
				style={{
					position: "absolute",
					left: currentPosition.x, 
					top: currentPosition:y
				}}
			>
				(x: {currentPosition.x}, y: {currentPosition.y})
			</div>
		</div>
	)
}

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.