SvelteUse

List of hooks inspired on https://usehooks.com, https://usehooks-ts.com and https://vueuse.org.

Installation

npm

npm install @dimaslz/svelteuse

yarn

yarn add @dimaslz/svelteuse

bun

bun add @dimaslz/svelteuse

TODO

This list is orientative, let's try to get all 👨‍💻.

<input checked="" disabled="" type="checkbox"> useBoolean: https://usehooks-ts.com/react-hook/use-boolean
<input checked="" disabled="" type="checkbox"> useClickAnyWhere: https://usehooks-ts.com/react-hook/use-click-any-where
<input checked="" disabled="" type="checkbox"> useClickOutside: https://usehooks.com/useclickaway, https://usehooks-ts.com/react-hook/use-on-click-outside
<input checked="" disabled="" type="checkbox"> useClipboard: https://usehooks.com/usecopytoclipboard, https://usehooks-ts.com/react-hook/use-copy-to-clipboard, https://vueuse.org/core/useClipboard/
<input checked="" disabled="" type="checkbox"> useCounter: https://usehooks.com/usecounter, https://usehooks-ts.com/react-hook/use-counter, https://vueuse.org/shared/useCounter/
<input checked="" disabled="" type="checkbox"> useDarkMode: https://usehooks-ts.com/react-hook/use-dark-mode, https://vueuse.org/core/useDark/
<input checked="" disabled="" type="checkbox"> useDebounce: https://usehooks.com/usedebounce, https://usehooks-ts.com/react-hook/use-debounce, https://vueuse.org/shared/useDebounceFn/
<input checked="" disabled="" type="checkbox"> useDebounceFn: https://usehooks.com/usedebounce, https://usehooks-ts.com/react-hook/use-debounce, https://vueuse.org/shared/useDebounceFn/
<input checked="" disabled="" type="checkbox"> useDocumentTitle: https://usehooks-ts.com/react-hook/use-document-title, https://vueuse.org/core/useTitle/, https://usehooks.com/usedocumenttitle
<input checked="" disabled="" type="checkbox"> useElementSize: https://usehooks-ts.com/react-hook/use-element-size, https://vueuse.org/core/useElementSize/, https://vueuse.org/core/useResizeObserver/
<input checked="" disabled="" type="checkbox"> useEventListener: https://vueuse.org/core/useEventListener/, https://usehooks.com/useeventlistener, https://usehooks-ts.com/react-hook/use-event-listener
<input checked="" disabled="" type="checkbox"> useFetch: https://vueuse.org/core/useFetch/, https://usehooks.com/usefetch, https://usehooks-ts.com/react-hook/use-fetch
<input checked="" disabled="" type="checkbox"> useHover: https://usehooks-ts.com/react-hook/use-hover, https://usehooks.com/usehover, https://vueuse.org/core/useElementHover/
<input checked="" disabled="" type="checkbox"> useImageOnLoad: https://usehooks-ts.com/react-hook/use-image-on-load, https://vueuse.org/core/useImage/
<input checked="" disabled="" type="checkbox"> useInterval: https://usehooks-ts.com/react-hook/use-interval, https://usehooks.com/useinterval, https://vueuse.org/shared/useInterval/
<input checked="" disabled="" type="checkbox"> useIntervalFn: https://vueuse.org/shared/useIntervalFn/, https://usehooks.com/useintervalwhen
<input checked="" disabled="" type="checkbox"> useLocalStorage: https://usehooks.com/uselocalstorage, https://vueuse.org/core/useLocalStorage/, https://usehooks-ts.com/react-hook/use-local-storage
<input checked="" disabled="" type="checkbox"> useMap: https://usehooks.com/usemap, https://usehooks-ts.com/react-hook/use-map, https://vueuse.org/shared/useArrayMap/
<input checked="" disabled="" type="checkbox"> useMediaQuery: https://usehooks.com/usemediaquery, https://usehooks-ts.com/react-hook/use-media-query, https://vueuse.org/core/useMediaQuery/
<input checked="" disabled="" type="checkbox"> useScreen: https://usehooks-ts.com/react-hook/use-screen
<input checked="" disabled="" type="checkbox"> useScript: https://usehooks.com/usescript, https://usehooks-ts.com/react-hook/use-script, https://vueuse.org/core/useScriptTag/
<input checked="" disabled="" type="checkbox"> useSessionStorage: https://usehooks.com/usesessionstorage, https://usehooks-ts.com/react-hook/use-session-storage, https://vueuse.org/core/useSessionStorage/
<input checked="" disabled="" type="checkbox"> useState
<input checked="" disabled="" type="checkbox"> useThrottle: https://usehooks.com/usethrottle, https://vueuse.org/shared/useThrottleFn/
<input checked="" disabled="" type="checkbox"> useThrottleFn: https://usehooks.com/usethrottle, https://vueuse.org/shared/useThrottleFn/
<input checked="" disabled="" type="checkbox"> useTimeout: https://vueuse.org/shared/useTimeout/, https://usehooks.com/usetimeout, https://usehooks-ts.com/react-hook/use-timeout
<input checked="" disabled="" type="checkbox"> useTimeoutFn: https://vueuse.org/shared/useTimeoutFn/
<input checked="" disabled="" type="checkbox"> useToggle: https://usehooks-ts.com/react-hook/use-toggle, https://usehooks.com/usetoggle, https://vueuse.org/shared/useToggle/
<input checked="" disabled="" type="checkbox"> useWindowSize: https://usehooks.com/usewindowsize, https://usehooks-ts.com/react-hook/use-window-size, https://vueuse.org/core/useWindowSize/

<input disabled="" type="checkbox"> useReducer
<input disabled="" type="checkbox"> useLocation (https://vueuse.org/core/useBrowserLocation/)
<input disabled="" type="checkbox"> useEventCallback: https://usehooks-ts.com/react-hook/use-event-callback
<input disabled="" type="checkbox"> usePreferredDark (https://vueuse.org/core/usePreferredDark/)
<input disabled="" type="checkbox"> useCountdown (https://usehooks-ts.com/react-hook/use-countdown, https://usehooks.com/usecountdown)
<input disabled="" type="checkbox"> useIntersectionObserver (https://usehooks-ts.com/react-hook/use-intersection-observer, https://usehooks.com/useintersectionobserver, https://vueuse.org/core/useIntersectionObserver/)
<input disabled="" type="checkbox"> useMouseInElement (https://vueuse.org/core/useMouseInElement/, https://usehooks.com/usemouse)
<input disabled="" type="checkbox"> useRandomInterval (https://usehooks.com/userandominterval)
<input disabled="" type="checkbox"> useNow (https://vueuse.org/core/useNow/)
<input disabled="" type="checkbox"> useIsClient (https://usehooks-ts.com/react-hook/use-is-client, https://usehooks.com/useisclient)
<input disabled="" type="checkbox"> useTimestamp (https://vueuse.org/core/useTimestamp/)
<input disabled="" type="checkbox"> useTransition (https://vueuse.org/core/useTransition/)
<input disabled="" type="checkbox"> usePrevious (https://usehooks.com/useprevious, https://vueuse.org/core/usePrevious/)
<input disabled="" type="checkbox"> useNetwork (https://vueuse.org/core/useNetwork/, https://usehooks.com/usenetworkstate)
<input disabled="" type="checkbox"> useOrientation (https://usehooks.com/useorientation, https://vueuse.org/core/useScreenOrientation/)
<input disabled="" type="checkbox"> usePreferredLanguage (https://usehooks.com/usepreferredlanguage, https://vueuse.org/core/usePreferredLanguages/)
<input disabled="" type="checkbox"> useRetry (https://usehooks.com/usecontinuousretry)
<input disabled="" type="checkbox"> useVisibilityChange (https://usehooks.com/usevisibilitychange, https://vueuse.org/core/useDocumentVisibility/)
<input disabled="" type="checkbox"> useRenderInfo (https://usehooks.com/userenderinfo)
<input disabled="" type="checkbox"> useRenderCount (https://usehooks.com/userendercount)
<input disabled="" type="checkbox"> useIsFirstRender (https://usehooks-ts.com/react-hook/use-is-first-render, https://usehooks.com/useisfirstrender)
<input disabled="" type="checkbox"> useLongPress (https://usehooks.com/uselongpress, https://vueuse.org/core/onLongPress/)
<input disabled="" type="checkbox"> useFavicon (https://usehooks.com/usefavicon, https://vueuse.org/core/useFavicon/)
<input disabled="" type="checkbox"> useDefault (https://usehooks.com/usedefault)
<input disabled="" type="checkbox"> useWindowScroll (https://usehooks.com/usewindowscroll, https://vueuse.org/core/useWindowScroll/)
<input disabled="" type="checkbox"> useWindowFocus (https://vueuse.org/core/useWindowFocus/)
<input disabled="" type="checkbox"> useMeasure (https://usehooks.com/usemeasure)
<input disabled="" type="checkbox"> useList (https://usehooks.com/uselist)
<input disabled="" type="checkbox"> useLockBodyScroll (https://usehooks.com/uselockbodyscroll, https://usehooks-ts.com/react-hook/use-locked-body)
<input disabled="" type="checkbox"> useScroll (https://vueuse.org/core/useScroll/)
<input disabled="" type="checkbox"> useScrollLock (https://vueuse.org/core/useScrollLock/)
<input disabled="" type="checkbox"> useQueue (https://usehooks.com/usequeue)
<input disabled="" type="checkbox"> useKeyPress (https://usehooks.com/usekeypress)
<input disabled="" type="checkbox"> useTimeoutPoll (https://vueuse.org/core/useTimeoutPoll/, )
<input disabled="" type="checkbox"> useSet (https://usehooks.com/useset, https://vueuse.org/shared/set/)
<input disabled="" type="checkbox"> useIdle (https://usehooks.com/useidle, https://vueuse.org/core/useIdle/)
<input disabled="" type="checkbox"> useHistory (https://usehooks.com/usehistorystate, https://vueuse.org/core/useRefHistory/, )
<input disabled="" type="checkbox"> useThrottledHistory (https://vueuse.org/core/useThrottledRefHistory/)
<input disabled="" type="checkbox"> useDebouncedHistory (https://vueuse.org/core/useDebouncedRefHistory/)
<input disabled="" type="checkbox"> useManualHistory (https://vueuse.org/core/useManualRefHistory/)
<input disabled="" type="checkbox"> usePageLeave (https://usehooks.com/usepageleave, https://vueuse.org/core/usePageLeave/)
<input disabled="" type="checkbox"> useObjectState (https://usehooks.com/useobjectstate)
<input disabled="" type="checkbox"> isMounted (https://usehooks-ts.com/react-hook/use-is-mounted)
<input disabled="" type="checkbox"> useFullScreen (https://vueuse.org/core/useFullscreen/)
<input disabled="" type="checkbox"> useSsr (https://usehooks-ts.com/react-hook/use-ssr)
<input disabled="" type="checkbox"> useStep (https://usehooks-ts.com/react-hook/use-step)
<input disabled="" type="checkbox"> useStepper (https://vueuse.org/core/useStepper/)
<input disabled="" type="checkbox"> useTernaryDarkMode (https://usehooks-ts.com/react-hook/use-ternary-dark-mode)
<input disabled="" type="checkbox"> useAsyncState (https://vueuse.org/core/useAsyncState/)
<input disabled="" type="checkbox"> useLastChanged (https://vueuse.org/shared/useLastChanged/)
<input disabled="" type="checkbox"> useStorage (https://vueuse.org/core/useStorage/)
<input disabled="" type="checkbox"> useActiveElement (https://vueuse.org/core/useActiveElement/)
<input disabled="" type="checkbox"> useDraggable (https://vueuse.org/core/useDraggable/)
<input disabled="" type="checkbox"> useDropZone (https://vueuse.org/core/useDropZone/)
<input disabled="" type="checkbox"> useElementBounding (https://vueuse.org/core/useElementBounding/)
<input disabled="" type="checkbox"> useElementVisibility (https://vueuse.org/core/useElementVisibility/)
<input disabled="" type="checkbox"> useMutationObserver (https://vueuse.org/core/useMutationObserver/)
<input disabled="" type="checkbox"> useParentElement (https://vueuse.org/core/useParentElement/)
<input disabled="" type="checkbox"> useBreakpoints (https://vueuse.org/core/useBreakpoints/)
<input disabled="" type="checkbox"> useBroadcastChannel (https://vueuse.org/core/useBroadcastChannel/)
<input disabled="" type="checkbox"> useColorMode (https://vueuse.org/core/useColorMode/)
<input disabled="" type="checkbox"> useCssVar (https://vueuse.org/core/useCssVar/)
<input disabled="" type="checkbox"> useEyeDropper (https://vueuse.org/core/useEyeDropper/)
<input disabled="" type="checkbox"> useFileDialog (https://vueuse.org/core/useFileDialog/)
<input disabled="" type="checkbox"> useFileSystemAccess (https://vueuse.org/core/useFileSystemAccess/)
<input disabled="" type="checkbox"> useMediaControls (https://vueuse.org/core/useMediaControls/)
<input disabled="" type="checkbox"> useMemory (https://vueuse.org/core/useMemory/)
<input disabled="" type="checkbox"> useObjectUrl (https://vueuse.org/core/useObjectUrl/)
<input disabled="" type="checkbox"> usePerformanceObserver (https://vueuse.org/core/usePerformanceObserver/)
<input disabled="" type="checkbox"> usePermission (https://vueuse.org/core/usePermission/)
<input disabled="" type="checkbox"> usePreferredColorScheme (https://vueuse.org/core/usePreferredColorScheme/)
<input disabled="" type="checkbox"> usePreferredContrast (https://vueuse.org/core/usePreferredContrast/)
<input disabled="" type="checkbox"> usePreferredReducedMotion (https://vueuse.org/core/usePreferredReducedMotion/)
<input disabled="" type="checkbox"> useStyleTag (https://vueuse.org/core/useStyleTag/)
<input disabled="" type="checkbox"> useTextareaAutosize (https://vueuse.org/core/useTextareaAutosize/)
<input disabled="" type="checkbox"> useTextDirection (https://vueuse.org/core/useTextDirection/)
<input disabled="" type="checkbox"> useUrlSearchParams (https://vueuse.org/core/useUrlSearchParams/?foo=bar&vueuse=awesome)
<input disabled="" type="checkbox"> useWakeLock (https://vueuse.org/core/useWakeLock/)
<input disabled="" type="checkbox"> useWebNotification (https://vueuse.org/core/useWebNotification/)
<input disabled="" type="checkbox"> onStartTyping (https://vueuse.org/core/onStartTyping/)
<input disabled="" type="checkbox"> useFocus (https://vueuse.org/core/useFocus/)
<input disabled="" type="checkbox"> useFocusWithin (https://vueuse.org/core/useFocusWithin/)
<input disabled="" type="checkbox"> useInfiniteScroll (https://vueuse.org/core/useInfiniteScroll/)
<input disabled="" type="checkbox"> useKeyModifier (https://vueuse.org/core/useKeyModifier/)
<input disabled="" type="checkbox"> useMagicKeys (https://vueuse.org/core/useMagicKeys/)
<input disabled="" type="checkbox"> useMouse (https://vueuse.org/core/useMouse/)
<input disabled="" type="checkbox"> useMousePressed (https://vueuse.org/core/useMousePressed/)
<input disabled="" type="checkbox"> useNavigatorLanguage (https://vueuse.org/core/useNavigatorLanguage/)
<input disabled="" type="checkbox"> useOnline (https://vueuse.org/core/useOnline/)
<input disabled="" type="checkbox"> usePointer (https://vueuse.org/core/usePointer/)
<input disabled="" type="checkbox"> usePointerLock (https://vueuse.org/core/usePointerLock/)
<input disabled="" type="checkbox"> usePointerSwipe (https://vueuse.org/core/usePointerSwipe/)
<input disabled="" type="checkbox"> useSpeechRecognition (https://vueuse.org/core/useSpeechRecognition/)
<input disabled="" type="checkbox"> useSpeechSynthesis (https://vueuse.org/core/useSpeechSynthesis/)
<input disabled="" type="checkbox"> useSwipe (https://vueuse.org/core/useSwipe/)
<input disabled="" type="checkbox"> useTextSelection (https://vueuse.org/core/useTextSelection/)
<input disabled="" type="checkbox"> useUserMedia (https://vueuse.org/core/useUserMedia/)
<input disabled="" type="checkbox"> useWebSocket (https://vueuse.org/core/useWebSocket/)

Author

{
    "name": "Dimas López Zurita",
    "role": "Senior Software Engineer",
    "alias": "dimaslz",
    "linkedin": "https://www.linkedin.com/in/dimaslopezzurita",
    "github": "https://github.com/dimaslz",
    "twitter": "https://twitter.com/dimaslz",
    "tags": "tooling, docker, tailwindcss, vue, SAAS, nodejs+express"
}

My other projects

https://ng-heroicons.dimaslz.dev/: An Angular components library to use Heroicons.com in your Angular projects.
https://randomdata.loremapi.io/: A tool to create mock Api responses with your custom schema.
https://svg-icon-2-fw-component.dimaslz.dev: A tool to create a framework icon component from a SVG
https://loremapi.io: Mock and document your Api's
https://cv.dimaslz.dev: My online CV
https://api.dimaslz.dev: My professional info by API
https://dimaslz.dev: Dev landing
https://dimaslz.com: Profesional landing profile

Package detail

@dimaslz/svelteuse

readme

SvelteUse

Installation

npm

yarn

bun

TODO

Author

My other projects