vh

vue3-hooks

Using vue3.x composition api in react-hooks style. Implemented just with composition api.

Showing:

Popularity

Downloads/wk

3

GitHub Stars

7

Maintenance

Last Commit

1yr ago

Contributors

1

Package

Dependencies

0

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

Vue3 hooks

npm package npm download github license github issues open github issues closed github language top github stars

NPM

Using vue3.x composition api in react-hooks style.

The react-like vue3 hooks are implemented just with composition api, requiring no any other dependencies but vue3.

If you are used to react hooks, and new to vue 3, you will try this. In this case, however, I suggest learning original composition api. It's easy :D.

What `vue3-hooks` really make sense is that so many third-party hooks library based on react can now easily migrate to vue technolegy stack. If you are an author of third-party react hooks, you may consider to use `vue3-hooks` to migrate your library to vue family. Very few code modification is required.

install

npm install --save vue3-hooks

features

  • useState (use ref and reactive from vue)
  • useEffect (use watch from vue)
  • WIP: more react-like hooks

useCallback is no need because setup will only been run once.

usage

import { computed } from 'vue';
import { useState, useEffect } from 'vue3-hooks';
import ajaxFetch from 'ajax-fetch-esm';
// ...

<p>{{ id }}</p>
<p>Counter: {{ count }}</p>
<p>{{ data.toString() }}</p>

// ...
setup(props) {
  // ...

  // all vue apps prefer using counter for example instead of hello world.
  const [count, setCount] = useState(0);
  const [data, setData] = useState({});

  // yes, vue3 composition api allow us passing an async function.
  // normal functions are also ok.
  // `() => props.id` means watching a computed vue3 variable.
  useEffect(async ([nextCount, nextId], [prevCount, prevId]) => {
    const timer = setTimeout(() => {
      setData(await ajaxFetch.get({ current: nextCount, id: nextId }));
    }, 500);
    // clean up
    return () => {
      clearTimeout(timer);
    };
  }, [count, () => props.id]);

  // ...
  return {
    // ...
    count,
    data,
    id: computed(() => props.id),
    // ...
  };
}
// ...

Recently updated

See CHANGELOG here.

LICENSE

MIT

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100