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 👨‍💻.

• 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/

• useReducer
• useLocation (https://vueuse.org/core/useBrowserLocation/)
• 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)
• useTimestamp (https://vueuse.org/core/useTimestamp/)
• useTransition (https://vueuse.org/core/useTransition/)
• usePrevious (https://usehooks.com/useprevious, https://vueuse.org/core/usePrevious/)
• useNetwork (https://vueuse.org/core/useNetwork/, https://usehooks.com/usenetworkstate)
• useOrientation (https://usehooks.com/useorientation, https://vueuse.org/core/useScreenOrientation/)
• usePreferredLanguage (https://usehooks.com/usepreferredlanguage, https://vueuse.org/core/usePreferredLanguages/)
• useRetry (https://usehooks.com/usecontinuousretry)
• useVisibilityChange (https://usehooks.com/usevisibilitychange, https://vueuse.org/core/useDocumentVisibility/)
• 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)
• useLongPress (https://usehooks.com/uselongpress, https://vueuse.org/core/onLongPress/)
• useFavicon (https://usehooks.com/usefavicon, https://vueuse.org/core/useFavicon/)
• useDefault (https://usehooks.com/usedefault)
• useWindowScroll (https://usehooks.com/usewindowscroll, https://vueuse.org/core/useWindowScroll/)
• useWindowFocus (https://vueuse.org/core/useWindowFocus/)
• useMeasure (https://usehooks.com/usemeasure)
• useList (https://usehooks.com/uselist)
• useLockBodyScroll (https://usehooks.com/uselockbodyscroll, https://usehooks-ts.com/react-hook/use-locked-body)
• useScroll (https://vueuse.org/core/useScroll/)
• useScrollLock (https://vueuse.org/core/useScrollLock/)
• 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/)
• useIdle (https://usehooks.com/useidle, https://vueuse.org/core/useIdle/)
• useHistory (https://usehooks.com/usehistorystate, https://vueuse.org/core/useRefHistory/, )
• useThrottledHistory (https://vueuse.org/core/useThrottledRefHistory/)
• useDebouncedHistory (https://vueuse.org/core/useDebouncedRefHistory/)
• useManualHistory (https://vueuse.org/core/useManualRefHistory/)
• usePageLeave (https://usehooks.com/usepageleave, https://vueuse.org/core/usePageLeave/)
• useObjectState (https://usehooks.com/useobjectstate)
• 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)
• useStep (https://usehooks-ts.com/react-hook/use-step)
• useStepper (https://vueuse.org/core/useStepper/)
• useTernaryDarkMode (https://usehooks-ts.com/react-hook/use-ternary-dark-mode)
• useAsyncState (https://vueuse.org/core/useAsyncState/)
• useLastChanged (https://vueuse.org/shared/useLastChanged/)
• useStorage (https://vueuse.org/core/useStorage/)
• 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/)
• useUrlSearchParams (https://vueuse.org/core/useUrlSearchParams/?foo=bar&vueuse=awesome)
• 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/)
• useTextSelection (https://vueuse.org/core/useTextSelection/)
• useUserMedia (https://vueuse.org/core/useUserMedia/)
• 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