d3f0aee0ee
Co-authored-by: Wilbert Abreu <wilbert.a.abreu@aexp.com> Co-authored-by: Luis Alvarez <luis@vercel.com> Co-authored-by: Joe Haddad <joe.haddad@zeit.co>
25 lines
713 B
JavaScript
25 lines
713 B
JavaScript
import { useRecoilValue, useSetRecoilState, useResetRecoilState } from 'recoil'
|
|
import { countState, incrementCount, decrementCount } from '../lib/recoil-atoms'
|
|
|
|
const useCounter = () => ({
|
|
count: useRecoilValue(countState),
|
|
increment: useSetRecoilState(incrementCount),
|
|
decrement: useSetRecoilState(decrementCount),
|
|
reset: useResetRecoilState(countState),
|
|
})
|
|
|
|
const Counter = () => {
|
|
const { count, increment, decrement, reset } = useCounter()
|
|
return (
|
|
<div>
|
|
<h1>
|
|
Count: <span>{count}</span>
|
|
</h1>
|
|
<button onClick={increment}>+1</button>
|
|
<button onClick={decrement}>-1</button>
|
|
<button onClick={reset}>Reset</button>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Counter
|