Hooks

A library of hooks for use in next.js.

Table of Contents

• Installation
• isClient
• isDev
• useAsyncEffect
• useBoolean
• useCounter
• useDarkMode

Install

npm i @neumatter/hooks

isClient

import { isClient } from '@neumatter/hooks'

if (isClient) {
  // use client
}

isDev

import { isDev } from '@neumatter/hooks'

if (isDev) {
  // use on development
}

useAsyncEffect

import { useAsyncEffect } from '@neumatter/hooks'

useAsyncEffect(
  async () => {
    // run async function
  },
  [], // dependency list
  {
    signal // optional abort signal
  }
)

useBoolean

import { useBoolean } from '@neumatter/hooks'

const [state, actions] = useBoolean(false)
actions.toggle() // toggles boolean
actions.set(true) // sets boolean
actions.setTrue() // sets boolean to true
actions.setFalse() // sets boolean to false

useCounter

import { useCounter } from '@neumatter/hooks'

const [state, actions] = useCounter(0, {
  min: 0, // optional minimum
  max: 9 // optional maximum
})

actions.increment()
actions.decrement()
actions.reset()
actions.set(5)

useDarkMode

import { useDarkMode } from '@neumatter/hooks'

const darkMode = useDarkMode(
  'colorTheme', // localStorage key
  'data-theme' // html attribute
)

darkMode.enableSystemPreference() // enable user os system preference
darkMode.enable() // enable dark mode
darkMode.disable() // disable dark mode
darkMode.toggle() // toggle dark mode
darkMode.theme // returns 'dark' | 'light'
darkMode.value // returns true if darkMode enabled
darkMode.overridedSystem // returns true if user manually changed darkMode.