enhook

Enable react/preact/∀ hooks for regular functions.

import enableHooks from 'enhook'
import { useState, useEffect } from 'any-hooks'

let countFrom = enableHooks(initCount => {
  let [count, setCount] = useState(initCount)

  setTimeout(() => {
    setCount(++count)
  }, 1000)

  // any side-effects
  useEffect(() => console.log(count), [count])
})

countFrom(0)

Enhook turns any function into reactive function with enabled hooks for a given framework. The framework is by default detected from the list:

• [x] react
• [x] preact
• [x] rax
• [x] haunted
• [x] augmentor
• [x] atomico
• [x] fuco
• [x] tng-hooks (passive)

In case of ES modules autodetection is not available (until import.meta.resolve() or await import() is available), you have to manually indicate framework to use.

import * as preact from 'preact'
import preactHooks from 'preact/hooks'
import enhook from 'enhook'
import setHooks, { useState } from 'any-hooks'

enhook.use(preact) // or enhook.use(React, ReactDOM)
setHooks(preactHooks)

// now enhook uses preact with  as base
let fn = enhook(() => {
  let [count, setCount] = useState(0)
  //...
})

API

fn = enhook(fn, { passive=false }?)

Create function wrapper, allowing hooks in function body. passive option may define if function must be reactive.

import enhook from 'enhook'
import { useState } from 'any-hooks'

let passiveFn = enhook((i) => {
  let [count, setCount] = useState(0)

  // this does not cause self-recursion in passive mode
  setCount(i)
}, { passive: true })

passiveFn(1)
passiveFn(2)

fn.unhook()

Teardown enhooked function. This will dispose all useEffects. Any subsequent calls to that function will throw an error.

See also

• unihooks - unified all-framework essential hooks collection.

License

MIT