any-hooks

    4.1.0 • Public • Published

    any-hooks Build Status unstable

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

    NPM

    import { useState, useEffect } from 'any-hooks'
     
    export function useMyHook(init) {
      let [state, setState] = useState(init)
    }

    Detected libraries:

    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

    HK

    Install

    npm i any-hooks

    DownloadsWeekly Downloads

    20

    Version

    4.1.0

    License

    MIT

    Unpacked Size

    16.1 kB

    Total Files

    10

    Last publish

    Collaborators

    • dy