widehook

widehook.js

• Usage
  • Create hook
  • Use in component
  • Or even outside
• Options
  • on(state, setState) { }
    • Access another state
  • returnObject: true
• Types

Usage

Create hook

import { createWideHook } from 'widehook'

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

Use in component

const Button = () => {
  const [message, setMessage] = useMessage()

  return <button onClick={() => setMessage('One Value')}>
      {message}
  </button>
}

Or even outside

const setSpecialMessage = (text: string) => {
  const [message, setMessage] = useMessage() // yes, it works here

  setMessage(text)
}

Options

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

returnObject: true

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

Types

Type declaration for init value:

type Text = 'One Text' | 'Another Text' | 'Completely Different Text'

export const useText = createWideHook({
  init: 'text' as Text,
})