Resolve any installed hooks
MIT License
Resolve available hooks. Hooks are detected from installed hook libraries or configured manually. Main purpose is enabling react hooks & high-level hooks for non-react environments.
import { useState, useEffect } from 'any-hooks'
export function useMyHook(init) {
let [state, setState] = useState(init)
}
react
preact
rax
haunted
fuco
augmentor
(dom-augmentor
, neverland
)atomico
tng-hooks
(manual)fn-with-hooks
(manual)plumejs
(manual)component-register-hooks
(manual)import hooks from 'tng-hooks'
import setHooks, { useState, useEffect } from 'any-hooks'
// switch global hooks to custom hooks lib, like tng-hooks
setHooks(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 |
❌ | ❌ | ❌ | ❌ | ❌ | ✅ | ✅ | ❌ | ❌ |
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]
}
Any-hooks can enable react hooks for non-react libraries, like augmentor, haunted etc. The strategy is similar to preact/compat aliasing.
webpack.config.js
:
const config = {
//...
"resolve": {
"alias": {
"react": "any-hook"
},
},
// mute warnings
"stats": {
"warnings": false
}
}
package.json
:
{
"alias": {
"react": "any-hooks"
},
}
.babelrc
:
{
"plugins": [
["module-resolver", {
"alias": {
"react": "any-hooks"
}
}]
]
}
rollup.config.js
:
import alias from '@rollup/plugin-alias'
module.exports = {
//...
plugins: [
alias({
entries: {
react: 'any-hooks'
}
})
]
}
jest.config.js
:
{
// ...
"moduleNameMapper": {
"react": "any-hooks"
},
}
npm i -D aliasify
, then in package.json
:
{
"aliasify": {
"aliases": {
"react": "any-hooks"
}
},
}
npm i -D module-alias
, then:
var moduleAlias = require('module-alias')
moduleAlias.addAliases({ 'react': 'any-hooks' })
MIT