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

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