1.2.0 • Published 5 years ago
vuses v1.2.0
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:
useCounter
anduseNumber
: tracks state of a numberuseToggle
anduseBoolean
: tracks state of a booleanusePrevious
: returns the previous stateuseDefault
: returns the default value when state isnull
orundefined
useGetSet
: returns state getterget()
instead of raw stateuseGetSetState
: as ifuseGetSet
anduseSetState
had a babyuseObservable
: tracks latest value of anObservable
useStateList
: circularly iterates over an arrayuseList
: tracks state of an arrayuseMap
: tracks state of an objectuseStateValidator
: tracks state of an object
- Sensors:
useWindowSize
: tracksWidnow
dimensions(browser environment is required)useWindowScroll
: tracksWindow
scroll position(browser environment is required)useBattery
: tracks device battery stateuseGeolocation
: tracks geo location state of user's deviceuseIdle
: tracks whether user is being inactiveuseIntersection
: tracks an HTML element's intersectionuseEvent
: subscribe to eventsuseMedia
: tracks state of a CSS media queryuseMediaDevices
: tracks connected hardware devicesuseMotion
: tracks state of device's motion sensoruseMouse
: tracks state of mouse positionuseNetwork
: tracks state of user's internet connectionusePageLeave
: triggers when mouse leaves page boundaries
- Side Effects:
useDebounce
: debounces a functionuseThrottle
: throttles a functionuseAsync
: resolves an async functionuseLocalStorage
: manages a value inlocalStorage
useSessionStorage
: manages a value insessionStorage
useFavicon
: sets favicon of the pageuseTitle
: sets title of the pageusePermission
: query permission status for browser APIs
- UI:
useClickAway
: triggers callback when user clicks outside target areauseCss
: dynamically adjusts CSSuseFullscreen
: display an element or video full-screenuseWait
: complex waiting management for UIs
- Animations:
useTimeout
: re-renders component after a timeoutuseInterval
: re-renders component on a set interval usingsetInterval
Contributing
Please see Contributing