• Create hook
• Use inside component
• Or even outside
• Hook options
  • objectifyWithName: "stateName"
  • on(state, setState) { }
    • Access another state

Create hook

import { createWideHook } from 'widehook'

export const useMessage = createWideHook({
  init: 'text',
})

Use inside component

const Button = () => {
  const [message, setMessage] = useMessage()
  
  const click = () => setMessage('One Value')

  return <button onClick={click}>
      {message}
  </button>
}

Or even outside

const setSpecialMessage = (text: string) => {
  const [message, setMessage] = useMessage() 

  setMessage(text)
}

Hook options

objectifyWithName: "stateName"

If set - hook returns an object with named props and methods:

const useCounter = createWideHook({
  init: 3,
  objectifyWithName: 'counter', 
})

...

const { counter, setCounter } = useCounter()

on(state, setState) { }

On each "setState" define action:

export const useMessage = createWideHook({
  init: 'text',
  on(text, setText) {
    if (text === 'specific message') setText('another text')
  },
})

Access another state

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)
  },
})