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.
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' })
- unihooks − multiframework hooks collection.
- any-observable − resolve any installed Observable.
- any-promise − resolve any installed Promise.
- jsx-pragmatic − any-framework JSX
MIT