import { createWideHook } from 'widehook'
export const useMessage = createWideHook({
init: 'text',
})
const Button = () => {
const [message, setMessage] = useMessage()
return <button onClick={() => setMessage('One Value')}>
{message}
</button>
}
const setSpecialMessage = (text: string) => {
const [message, setMessage] = useMessage() // yes, it works here
setMessage(text)
}
On each "setState"
define action:
export const useMessage = createWideHook({
init: 'text',
on(text, setText) {
if (text === 'specific message') setText('another text')
},
})
Take another widehook to read and update:
export const useText = createWideHook({
init: 'text',
on(text, setText) {
const [number, setNumber] = useNumber()
if (text === 'specific text') setNumber(7)
},
})
If true - hook returns an object with named props and methods:
const useCounter = createWideHook({
init: 3,
returnObject: true,
name: 'counter', // requires name
})
const { counter, setCounter } = useCounter() // in component
Type declaration for init value:
type Text = 'One Text' | 'Another Text' | 'Completely Different Text'
export const useText = createWideHook({
init: 'text' as Text,
})