any-hooks

Resolve available hooks. Hooks are detected from installed hook libraries, if no hooks found - manual setup is expected.

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

export function useMyHook(init) {
  let [state, setState] = useState(init)
}

Detected libraries:

• [x] react
• [x] preact
• [x] rax
• [x] haunted
• [x] fuco
• [x] augmentor (dom-augmentor, neverland)
• [x] atomico
• [ ] tng-hooks (manual)
• [ ] fn-with-hooks (manual)
• [ ] plumejs (manual)
• [ ] component-register-hooks (manual)

Set hooks manually:

import hooks from 'tng-hooks'
import setHooks, { useState, useEffect } from 'any-hooks'

// switch global hooks to custom hooks lib, like tng-hooks
setHooks(hooks)

Supported hooks

| | React | Preact | Rax | Haunted | Augmentor | Fuco | Atomico | TNG-hooks | fn-with-hooks | |---|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:| | useState | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | | useEffect | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | | useContext | ✅ | ✅ | ✅ | ✅ | ✅* | ✅ | ❌ | ❌ | ❌ | | useCallback | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ❌ | ✅ | ✅ | | useReducer | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | | useMemo | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅* | ✅ | ✅ | | useRef | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ❌ | ✅ | ❌ | | useLayoutEffect | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ❌ | ❌ | ❌ | | useImperativeHandle | ✅ | ✅ | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | | useDebugValue* | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | | useTransition* | ✅* | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | | useProperty* | ❌ | ❌ | ❌ | ❌ | ❌ | ✅ | ✅ | ❌ | ❌ |

* − non-standard

Use cases

Hooks libraries / packages

Any-hooks can be used in hooks libraries (like unihooks) to extend frameworks support to non-react.

// super-hooks
import { useState, useEffect } from 'any-hooks'

export function useMySuperHook(init) {
  let [state, setState] = useState(init)

  // ...

  return [state, setState]
}

Hooks adapter

Any-hooks can enable react hooks for non-react libraries, like augmentor, haunted etc. The strategy is similar to preact/compat aliasing.

Aliasing in webpack

webpack.config.js:

const config = {
   //...
  "resolve": {
    "alias": {
      "react": "any-hook"
    },
  },
  // mute warnings
  "stats": {
    "warnings": false
  }
}

Aliasing in parcel

package.json:

{
  "alias": {
    "react": "any-hooks"
  },
}

Aliasing in babel

.babelrc:

{
  "plugins": [
    ["module-resolver", {
      "alias": {
        "react": "any-hooks"
      }
    }]
  ]
}

Aliasing in rollup

rollup.config.js:

import alias from '@rollup/plugin-alias'

module.exports = {
  //...
  plugins: [
    alias({
      entries: {
          react: 'any-hooks'
      }
    })
  ]
}

Aliasing in jest

jest.config.js:

{
  // ...
  "moduleNameMapper": {
    "react": "any-hooks"
  },
}

Aliasing via browserify

npm i -D aliasify, then in package.json:

{
  "aliasify": {
    "aliases": {
      "react": "any-hooks"
    }
  },
}

Aliasing in node

npm i -D module-alias, then:

var moduleAlias = require('module-alias')
moduleAlias.addAliases({ 'react': 'any-hooks' })

See also

• enhook − turn function into hooks-enabled function.
• unihooks − multiframework hooks collection.
• any-observable − resolve any installed Observable.
• any-promise − resolve any installed Promise.

License

MIT