SvelteUse

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

Current version: v0.0.2

Note

Hey!! Do you like this library? Do you find it useful? Are you using it for a personal project or at your company? Please let me know. This project started out as a learning exercise, but if you find it useful, please give it a star to keep me motivated to release future updates.

Thanks! 🙋‍♂️

Table of versions

svelteuse version	based on
0.0.1	>4.2
0.0.2 (latest)	>4.2

Installation

npm

npm install @dimaslz/svelteuse

pnpm

pnpm add @dimaslz/svelteuse

yarn

yarn add @dimaslz/svelteuse

bun

bun add @dimaslz/svelteuse

TODO (hooks)

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

• useBoolean: https://usehooks-ts.com/react-hook/use-boolean
• useClickAnyWhere: https://usehooks-ts.com/react-hook/use-click-any-where
• useClickOutside: https://usehooks.com/useclickaway, https://usehooks-ts.com/react-hook/use-on-click-outside
• useClipboard: https://usehooks.com/usecopytoclipboard, https://usehooks-ts.com/react-hook/use-copy-to-clipboard, https://vueuse.org/core/useClipboard/
• useCounter: https://usehooks.com/usecounter, https://usehooks-ts.com/react-hook/use-counter, https://vueuse.org/shared/useCounter/
• useDarkMode: https://usehooks-ts.com/react-hook/use-dark-mode, https://vueuse.org/core/useDark/
• useDebounce: https://usehooks.com/usedebounce, https://usehooks-ts.com/react-hook/use-debounce, https://vueuse.org/shared/useDebounceFn/
• useDebounceFn: https://usehooks.com/usedebounce, https://usehooks-ts.com/react-hook/use-debounce, https://vueuse.org/shared/useDebounceFn/
• useDocumentTitle: https://usehooks-ts.com/react-hook/use-document-title, https://vueuse.org/core/useTitle/, https://usehooks.com/usedocumenttitle
• useElementSize: https://usehooks-ts.com/react-hook/use-element-size, https://vueuse.org/core/useElementSize/, https://vueuse.org/core/useResizeObserver/
• useEventListener: https://vueuse.org/core/useEventListener/, https://usehooks.com/useeventlistener, https://usehooks-ts.com/react-hook/use-event-listener
• useFetch: https://vueuse.org/core/useFetch/, https://usehooks.com/usefetch, https://usehooks-ts.com/react-hook/use-fetch
• useHover: https://usehooks-ts.com/react-hook/use-hover, https://usehooks.com/usehover, https://vueuse.org/core/useElementHover/
• useImageOnLoad: https://usehooks-ts.com/react-hook/use-image-on-load, https://vueuse.org/core/useImage/
• useInterval: https://usehooks-ts.com/react-hook/use-interval, https://usehooks.com/useinterval, https://vueuse.org/shared/useInterval/
• useIntervalFn: https://vueuse.org/shared/useIntervalFn/, https://usehooks.com/useintervalwhen
• useLocalStorage: https://usehooks.com/uselocalstorage, https://vueuse.org/core/useLocalStorage/, https://usehooks-ts.com/react-hook/use-local-storage
• useMap: https://usehooks.com/usemap, https://usehooks-ts.com/react-hook/use-map, https://vueuse.org/shared/useArrayMap/
• useMediaQuery: https://usehooks.com/usemediaquery, https://usehooks-ts.com/react-hook/use-media-query, https://vueuse.org/core/useMediaQuery/
• useScreen: https://usehooks-ts.com/react-hook/use-screen
• useScript: https://usehooks.com/usescript, https://usehooks-ts.com/react-hook/use-script, https://vueuse.org/core/useScriptTag/
• useSessionStorage: https://usehooks.com/usesessionstorage, https://usehooks-ts.com/react-hook/use-session-storage, https://vueuse.org/core/useSessionStorage/
• useState
• useThrottle: https://usehooks.com/usethrottle, https://vueuse.org/shared/useThrottleFn/
• useThrottleFn: https://usehooks.com/usethrottle, https://vueuse.org/shared/useThrottleFn/
• useTimeout: https://vueuse.org/shared/useTimeout/, https://usehooks.com/usetimeout, https://usehooks-ts.com/react-hook/use-timeout
• useTimeoutFn: https://vueuse.org/shared/useTimeoutFn/
• useToggle: https://usehooks-ts.com/react-hook/use-toggle, https://usehooks.com/usetoggle, https://vueuse.org/shared/useToggle/
• useWindowSize: https://usehooks.com/usewindowsize, https://usehooks-ts.com/react-hook/use-window-size, https://vueuse.org/core/useWindowSize/
• useLocation: (https://vueuse.org/core/useLocation)
• useEventCallback: https://usehooks-ts.com/react-hook/use-event-callback
• usePreferredDark: (https://vueuse.org/core/usePreferredDark)
• useCountdown: (https://usehooks-ts.com/react-hook/use-countdown, https://usehooks.com/usecountdown)
• useIntersectionObserver: (https://usehooks-ts.com/react-hook/use-intersection-observer, https://usehooks.com/useintersectionobserver, https://vueuse.org/core/useIntersectionObserver)
• useMouseInElement: (https://vueuse.org/core/useMouseInElement, https://usehooks.com/usemouse)
• useRandomInterval: (https://usehooks.com/userandominterval)
• useNow: (https://vueuse.org/core/useNow)
• useIsClient: (https://usehooks-ts.com/react-hook/use-is-client, https://usehooks.com/useisclient)
• useTransition: (https://vueuse.org/core/useTransition)
• usePrevious: (https://usehooks.com/useprevious, https://vueuse.org/core/usePrevious)
• useOrientation: (https://usehooks.com/useorientation, https://vueuse.org/core/useScreenOrientation)
• usePreferredLanguage: (https://usehooks.com/usepreferredlanguage, https://vueuse.org/core/usePreferredLanguages)
• useContinuousRetry: (https://usehooks.com/usecontinuousretry)
• useLongPress: (https://usehooks.com/uselongpress, https://vueuse.org/core/onLongPress)
• useVisibilityChange (https://usehooks.com/usevisibilitychange, https://vueuse.org/core/useDocumentVisibility)
• useWindowFocus: (https://vueuse.org/core/useWindowFocus)
• useWindowScroll: (https://usehooks.com/usewindowscroll, https://vueuse.org/core/useWindowScroll)
• useScroll: (https://vueuse.org/core/useScroll)
• useMeasure: (https://usehooks.com/usemeasure)
• useFavicon: (https://usehooks.com/usefavicon, https://vueuse.org/core/useFavicon)
• useList: (https://usehooks.com/uselist)
• useStep: (https://usehooks-ts.com/react-hook/use-step)
• useStepper: (https://vueuse.org/core/useStepper)
• useHistory: (https://usehooks.com/usehistorystate, https://vueuse.org/core/useRefHistory)
• useThrottledHistory: (https://vueuse.org/core/useThrottledRefHistory)
• useIdle: (https://usehooks.com/useidle, https://vueuse.org/core/useIdle)
• useObjectState: (https://usehooks.com/useobjectstate)
• useAsyncState: (https://vueuse.org/core/useAsyncState)
• useScrollLock: (https://vueuse.org/core/useScrollLock)
• useStorage: (https://vueuse.org/core/useStorage)
• useTextSelection: (https://vueuse.org/core/useTextSelection)
• useUrlSearchParams: (https://vueuse.org/core/useUrlSearchParams/?foo=bar&vueuse=awesome)

• useReducer
• useTimestamp (https://vueuse.org/core/useTimestamp/)
• useNetwork (https://vueuse.org/core/useNetwork/, https://usehooks.com/usenetworkstate)
• useRenderInfo (https://usehooks.com/userenderinfo)
• useRenderCount (https://usehooks.com/userendercount)
• useIsFirstRender (https://usehooks-ts.com/react-hook/use-is-first-render, https://usehooks.com/useisfirstrender)
• useDefault (https://usehooks.com/usedefault)
• useLockBodyScroll (https://usehooks.com/uselockbodyscroll, https://usehooks-ts.com/react-hook/use-locked-body)
• useQueue (https://usehooks.com/usequeue)
• useKeyPress (https://usehooks.com/usekeypress)
• useTimeoutPoll (https://vueuse.org/core/useTimeoutPoll/, )
• useSet (https://usehooks.com/useset, https://vueuse.org/shared/set/)
• useDebouncedHistory (https://vueuse.org/core/useDebouncedRefHistory/)
• useManualHistory (https://vueuse.org/core/useManualRefHistory/)
• usePageLeave (https://usehooks.com/usepageleave, https://vueuse.org/core/usePageLeave/)
• isMounted (https://usehooks-ts.com/react-hook/use-is-mounted)
• useFullScreen (https://vueuse.org/core/useFullscreen/)
• useSsr (https://usehooks-ts.com/react-hook/use-ssr)
• useTernaryDarkMode (https://usehooks-ts.com/react-hook/use-ternary-dark-mode)
• useLastChanged (https://vueuse.org/shared/useLastChanged/)
• useActiveElement (https://vueuse.org/core/useActiveElement/)
• useDraggable (https://vueuse.org/core/useDraggable/)
• useDropZone (https://vueuse.org/core/useDropZone/)
• useElementBounding (https://vueuse.org/core/useElementBounding/)
• useElementVisibility (https://vueuse.org/core/useElementVisibility/)
• useMutationObserver (https://vueuse.org/core/useMutationObserver/)
• useParentElement (https://vueuse.org/core/useParentElement/)
• useBreakpoints (https://vueuse.org/core/useBreakpoints/)
• useBroadcastChannel (https://vueuse.org/core/useBroadcastChannel/)
• useColorMode (https://vueuse.org/core/useColorMode/)
• useCssVar (https://vueuse.org/core/useCssVar/)
• useEyeDropper (https://vueuse.org/core/useEyeDropper/)
• useFileDialog (https://vueuse.org/core/useFileDialog/)
• useFileSystemAccess (https://vueuse.org/core/useFileSystemAccess/)
• useMediaControls (https://vueuse.org/core/useMediaControls/)
• useMemory (https://vueuse.org/core/useMemory/)
• useObjectUrl (https://vueuse.org/core/useObjectUrl/)
• usePerformanceObserver (https://vueuse.org/core/usePerformanceObserver/)
• usePermission (https://vueuse.org/core/usePermission/)
• usePreferredColorScheme (https://vueuse.org/core/usePreferredColorScheme/)
• usePreferredContrast (https://vueuse.org/core/usePreferredContrast/)
• usePreferredReducedMotion (https://vueuse.org/core/usePreferredReducedMotion/)
• useStyleTag (https://vueuse.org/core/useStyleTag/)
• useTextareaAutosize (https://vueuse.org/core/useTextareaAutosize/)
• useTextDirection (https://vueuse.org/core/useTextDirection/)
• useWakeLock (https://vueuse.org/core/useWakeLock/)
• useWebNotification (https://vueuse.org/core/useWebNotification/)
• onStartTyping (https://vueuse.org/core/onStartTyping/)
• useFocus (https://vueuse.org/core/useFocus/)
• useFocusWithin (https://vueuse.org/core/useFocusWithin/)
• useInfiniteScroll (https://vueuse.org/core/useInfiniteScroll/)
• useKeyModifier (https://vueuse.org/core/useKeyModifier/)
• useMagicKeys (https://vueuse.org/core/useMagicKeys/)
• useMouse (https://vueuse.org/core/useMouse/)
• useMousePressed (https://vueuse.org/core/useMousePressed/)
• useNavigatorLanguage (https://vueuse.org/core/useNavigatorLanguage/)
• useOnline (https://vueuse.org/core/useOnline/)
• usePointer (https://vueuse.org/core/usePointer/)
• usePointerLock (https://vueuse.org/core/usePointerLock/)
• usePointerSwipe (https://vueuse.org/core/usePointerSwipe/)
• useSpeechRecognition (https://vueuse.org/core/useSpeechRecognition/)
• useSpeechSynthesis (https://vueuse.org/core/useSpeechSynthesis/)
• useSwipe (https://vueuse.org/core/useSwipe/)
• useUserMedia (https://vueuse.org/core/useUserMedia/)
• useWebSocket (https://vueuse.org/core/useWebSocket/)

TOOD (project)

• Generate version from CI
• Changelog
• Release
• Documentation by version

Author

{
	"name": "Dimas López Zurita",
	"role": "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