vuses

Vue Hooks that built with Vue Composition Api

For Vue 3, but also compatible with Vue 2

Usage

if you are using Vue2, you must first import @vue/composition-api package:

import Vue from 'vue'
import CompositionAPI from '@vue/composition-api'

Vue.use(CompositionAPI) // required for Vue2

and then:

<template>
  <div>
    <p>{{ counter }}</p>
    <button @click="inc">inc</button>
    <button @click="dec">dec</button>
  </div>
</template>

<script>
  import { useCounter } from 'vuses'

  export default {
    setup () {
      const [counter, { inc, dec }] = useCounter()
      return {
        counter,
        inc,
        dec
      }
    }
  }
</script>

Hooks Plan

• State:
  • [x] useCounter and useNumber: tracks state of a number
  • [x] useToggle and useBoolean: tracks state of a boolean
  • [x] usePrevious: returns the previous state
  • [ ] useDefault: returns the default value when state is null or undefined
  • [ ] useGetSet: returns state getter get() instead of raw state
  • [ ] useGetSetState: as if useGetSet and useSetState had a baby
  • [ ] useObservable: tracks latest value of an Observable
  • [ ] useStateList: circularly iterates over an array
  • [ ] useList: tracks state of an array
  • [ ] useMap: tracks state of an object
  • [ ] useStateValidator: tracks state of an object
• Sensors:
  • [x] useWindowSize: tracks Widnow dimensions(browser environment is required)
  • [x] useWindowScroll: tracks Window scroll position(browser environment is required)
  • [ ] useBattery: tracks device battery state
  • [x] useGeolocation: tracks geo location state of user's device
  • [ ] useIdle: tracks whether user is being inactive
  • [ ] useIntersection: tracks an HTML element's intersection
  • [ ] useEvent: subscribe to events
  • [x] useMedia: tracks state of a CSS media query
  • [ ] useMediaDevices: tracks connected hardware devices
  • [ ] useMotion: tracks state of device's motion sensor
  • [x] useMouse: tracks state of mouse position
  • [ ] useNetwork: tracks state of user's internet connection
  • [ ] usePageLeave: triggers when mouse leaves page boundaries
• Side Effects:
  • [ ] useDebounce: debounces a function
  • [ ] useThrottle: throttles a function
  • [ ] useAsync: resolves an async function
  • [x] useLocalStorage: manages a value in localStorage
  • [x] useSessionStorage: manages a value in sessionStorage
  • [x] useFavicon: sets favicon of the page
  • [x] useTitle: sets title of the page
  • [x] usePermission: query permission status for browser APIs
• UI:
  • [ ] useClickAway: triggers callback when user clicks outside target area
  • [ ] useCss: dynamically adjusts CSS
  • [ ] useFullscreen: display an element or video full-screen
  • [ ] useWait: complex waiting management for UIs
• Animations:
  • [ ] useTimeout: re-renders component after a timeout
  • [ ] useInterval: re-renders component on a set interval using setInterval

Contributing

Please see Contributing

Contributors

License

MIT