useHistoryState
If the state is changed, record it.
Install
yarn add @odnh/use-history-state
# or
npm install @odnh/use-history-state
Use
useHistoryState < T > ( initialState ?: T , size ?: number ) => Result ;
parameters
Name
Type
description
initialState
any
-
size
number
Stack size to record
returns
Name
Type
Description
Result
Result
default "use state" with History
interface History < T > {
histories : T [ ] ,
pop : ( ) => void ;
deleteItem : ( value : T ) => void ;
clearItems : ( ) => void ;
}
type Result < T > = [ T , SetState < T > , History < T > ] ;
Example
live demo
import React from 'react' ;
import useHistoryState from '@odnh/use-history-state' ;
const App = ( ) => {
const [ state , setState , history ] = useHistoryState < number > ( 0 ) ;
const increment = React . useCallback ( ( ) => {
setState ( prev => prev + 1 ) ;
} , [ setState ] ) ;
const decrement = React . useCallback ( ( ) => {
setState ( prev => prev - 1 ) ;
} , [ setState ] ) ;
const revert = React . useCallback ( ( ) => {
history . pop ( ) ;
} , [ history ] ) ;
const clear = REact . useCallback ( ( ) => {
history . clearItems ( ) ;
} , [ history ] ) ;
return (
< >
< div >
< button type = "button" onClick = { increment } > + 1 < / button >
< p > { state } < / p >
< button type = "button" onClick = { decrement } > - 1 < / button >
< / div >
< button type = "button" onClick = { revert } > revert< / button >
< button type = "button" onClick = { clear } > clear< / button >
< p > histories< / p >
< ul >
{ history . histories . map ( value => (
< li key = { value } >
{ value }
< / li >
) ) }
< / ul >
< / >
)
}