4.1.0 • Published 6 years ago
any-hooks v4.1.0
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:
reactpreactraxhauntedfucoaugmentor(dom-augmentor,neverland)atomicotng-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
4.1.0
6 years ago
4.0.2
6 years ago
4.0.1
6 years ago
4.0.0
6 years ago
3.0.1
6 years ago
3.0.0
6 years ago
2.3.0
6 years ago
2.2.0
6 years ago
2.1.2
6 years ago
2.1.1
6 years ago
2.1.0
6 years ago
2.0.0
6 years ago
1.2.0
6 years ago
1.1.3
6 years ago
1.1.1
6 years ago
1.1.2
6 years ago
1.1.0
6 years ago
1.0.1
6 years ago
1.0.0
6 years ago
