Documentation

Getting Started

Hooks Overview

useFetch( )useCopyToClipboard( )useNetwork( )useFullScreen( )useGeolocation( )useSelectedText( )useStateCallback( )useResize( )useSearch( )useImageDownload( )

useStateCallback( )

A react hook that acts as a state callback by mimicking functionality same as react class-based setState that provides a fallback with the current state which can be used in the callback function

Usage

1import { useStateCallback } from 'react-modern-hooks'
2
3const Demo = () => {
4  const [value, setValue] = useStateCallback<string>('')
5
6  const handleChange = (e: any) => {
7    setValue(e.target.value, (currentValue) => {
8      // Perform search with the current set value in the state
9      console.log('Text to perform search', currentValue)
10      handleSearch(currentValue)
11    })
12  }
13
14  return (
15    <div>
16      <p>Perform an action with current value set in the state</p>
17      <input
18        placeholder='Type something...'
19        value={value}
20        onChange={handleChange}
21      />
22    </div>
23  )
24}
25
26export default Demo

References

Input Variables

initialState - The initial state value

Output Variables

state - The updated state value as first array item

setState - The function to handle change of the state value, Which also receives an optional callback using the current state