UseSignal

Collection of Essential React Hooks with Signals. Basically a FORK of VueUse.

Notice

This project is currently in the initial development stage and is not yet stable.
Bad DX with server side framework(e.g. Next.js) DEV mode, when a component changed, the useSignalEffect(@preact/signals-react)/useWatch*(usesignal/core) will never run the callback when signal changed; works fine in PROD mode.

Docs & Demos

UseSignal, but you can ref to VueUse directly, all currently supported functions usage basically the same.

Install

pnpm add @preact/signals-react @usesignal/core

Usage

import { useLocalStorage, useMouse, usePreferredDark } from '@usesignal/core'

export function useCustomHook() {
  // tracks mouse position
  const { x, y } = useMouse()

  // if user prefers dark theme
  const isDark = usePreferredDark()

  // persist state in localStorage
  const store = useLocalStorage(
    'my-storage',
    {
      name: 'Apple',
      color: 'red',
    },
  )

  return { x, y, isDark, store }
}

Enhancements

`signal`=`useSignal`

Proxy Signal to support useRef.

import { useSignal } from '@usesignal/core'

export default function App() {
  const el = useSignal()
  const input = useSignal('Hello World')

  console.log(el.value) // div

  return (
    <div ref={el}>
      <input defaultValue={input.value} />
    </div>
  )
}

`computed`=`useComputed`

Proxy ReadonlySignal to ComputedSignal, support get and set.

import { useComputed } from '@usesignal/core'

export default function App() {
  const count = useSignal(0)
  // readonly
  const computed = useComputed(() => count.value * 2)
  // getter & setter
  const computed2 = useComputed({
    get() {
      return count.value * 2
    },
    set(value) {
      count.value = value / 2
    },
  })
}