{"id":14962570,"url":"https://github.com/dimaslz/svelteuse","last_synced_at":"2025-10-25T00:30:26.618Z","repository":{"id":226956060,"uuid":"701830880","full_name":"dimaslz/svelteuse","owner":"dimaslz","description":"Svelte hooks like React","archived":false,"fork":false,"pushed_at":"2024-08-26T23:04:52.000Z","size":1015,"stargazers_count":3,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-09-29T11:51:48.446Z","etag":null,"topics":["hooks","library","sveltejs"],"latest_commit_sha":null,"homepage":"https://svelteuse.dimaslz.dev","language":"Svelte","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dimaslz.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-10-07T17:25:34.000Z","updated_at":"2024-09-13T12:27:46.000Z","dependencies_parsed_at":null,"dependency_job_id":"5b17dc95-2f01-41f1-9b87-fa27b986bc1d","html_url":"https://github.com/dimaslz/svelteuse","commit_stats":null,"previous_names":["dimaslz/svelteuse"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dimaslz%2Fsvelteuse","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dimaslz%2Fsvelteuse/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dimaslz%2Fsvelteuse/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dimaslz%2Fsvelteuse/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dimaslz","download_url":"https://codeload.github.com/dimaslz/svelteuse/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":219867385,"owners_count":16555891,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["hooks","library","sveltejs"],"created_at":"2024-09-24T13:30:02.037Z","updated_at":"2025-10-25T00:30:25.820Z","avatar_url":"https://github.com/dimaslz.png","language":"Svelte","funding_links":[],"categories":[],"sub_categories":[],"readme":"# SvelteUse\n\nList of hooks inspired on [https://usehooks.com](https://usehooks.com), [https://usehooks-ts.com](https://usehooks-ts.com) and [https://vueuse.org](https://vueuse.org).\n\n## Installation\n\n### npm\n\n`npm install @dimaslz/svelteuse`\n\n### yarn\n\n`yarn add @dimaslz/svelteuse`\n\n### bun\n\n`bun add @dimaslz/svelteuse`\n\n## TODO\n\nThis list is orientative, let's try to get all 👨‍💻.\n\n- [x] [useBoolean](/src/hooks/useBoolean): \u003chttps://usehooks-ts.com/react-hook/use-boolean\u003e\n- [x] [useClickAnyWhere](/src/hooks/useClickAnyWhere): \u003chttps://usehooks-ts.com/react-hook/use-click-any-where\u003e\n- [x] [useClickOutside](/src/hooks/useClickOutside): \u003chttps://usehooks.com/useclickaway\u003e, \u003chttps://usehooks-ts.com/react-hook/use-on-click-outside\u003e\n- [x] [useClipboard](/src/hooks/useClipboard): \u003chttps://usehooks.com/usecopytoclipboard\u003e, \u003chttps://usehooks-ts.com/react-hook/use-copy-to-clipboard\u003e, \u003chttps://vueuse.org/core/useClipboard/\u003e\n- [x] [useCounter](/src/hooks/useCounter): \u003chttps://usehooks.com/usecounter\u003e, \u003chttps://usehooks-ts.com/react-hook/use-counter\u003e, \u003chttps://vueuse.org/shared/useCounter/\u003e\n- [x] [useDarkMode](/src/hooks/useDarkMode): \u003chttps://usehooks-ts.com/react-hook/use-dark-mode\u003e, \u003chttps://vueuse.org/core/useDark/\u003e\n- [x] [useDebounce](/src/hooks/useDebounce): \u003chttps://usehooks.com/usedebounce\u003e, \u003chttps://usehooks-ts.com/react-hook/use-debounce\u003e, \u003chttps://vueuse.org/shared/useDebounceFn/\u003e\n- [x] [useDebounceFn](/src/hooks/useDebounce): \u003chttps://usehooks.com/usedebounce\u003e, \u003chttps://usehooks-ts.com/react-hook/use-debounce\u003e, \u003chttps://vueuse.org/shared/useDebounceFn/\u003e\n- [x] [useDocumentTitle](/src/hooks/useDocumentTitle): \u003chttps://usehooks-ts.com/react-hook/use-document-title\u003e, \u003chttps://vueuse.org/core/useTitle/\u003e, \u003chttps://usehooks.com/usedocumenttitle\u003e\n- [x] [useElementSize](/src/hooks/useElementSize): \u003chttps://usehooks-ts.com/react-hook/use-element-size\u003e, \u003chttps://vueuse.org/core/useElementSize/\u003e, \u003chttps://vueuse.org/core/useResizeObserver/\u003e\n- [x] [useEventListener](/src/hooks/useEventListener): \u003chttps://vueuse.org/core/useEventListener/\u003e, \u003chttps://usehooks.com/useeventlistener\u003e, \u003chttps://usehooks-ts.com/react-hook/use-event-listener\u003e\n- [x] [useFetch](/src/hooks/useFetch): \u003chttps://vueuse.org/core/useFetch/\u003e, \u003chttps://usehooks.com/usefetch\u003e, \u003chttps://usehooks-ts.com/react-hook/use-fetch\u003e\n- [x] [useHover](/src/hooks/useHover): \u003chttps://usehooks-ts.com/react-hook/use-hover\u003e, \u003chttps://usehooks.com/usehover\u003e, \u003chttps://vueuse.org/core/useElementHover/\u003e\n- [x] [useImageOnLoad](/src/hooks/useImageOnLoad): \u003chttps://usehooks-ts.com/react-hook/use-image-on-load\u003e, \u003chttps://vueuse.org/core/useImage/\u003e\n- [x] [useInterval](/src/hooks/useInterval): \u003chttps://usehooks-ts.com/react-hook/use-interval\u003e, \u003chttps://usehooks.com/useinterval\u003e, \u003chttps://vueuse.org/shared/useInterval/\u003e\n- [x] [useIntervalFn](/src/hooks/useIntervalFn): \u003chttps://vueuse.org/shared/useIntervalFn/\u003e, \u003chttps://usehooks.com/useintervalwhen\u003e\n- [x] [useLocalStorage](/src/hooks/useLocalStorage): \u003chttps://usehooks.com/uselocalstorage\u003e, \u003chttps://vueuse.org/core/useLocalStorage/\u003e, \u003chttps://usehooks-ts.com/react-hook/use-local-storage\u003e\n- [x] [useMap](/src/hooks/useMap): \u003chttps://usehooks.com/usemap\u003e, \u003chttps://usehooks-ts.com/react-hook/use-map\u003e, \u003chttps://vueuse.org/shared/useArrayMap/\u003e\n- [x] [useMediaQuery](/src/hooks/useMediaQuery): \u003chttps://usehooks.com/usemediaquery\u003e, \u003chttps://usehooks-ts.com/react-hook/use-media-query\u003e, \u003chttps://vueuse.org/core/useMediaQuery/\u003e\n- [x] [useScreen](/src/hooks/useScreen): \u003chttps://usehooks-ts.com/react-hook/use-screen\u003e\n- [x] [useScript](/src/hooks/useScript): \u003chttps://usehooks.com/usescript\u003e, \u003chttps://usehooks-ts.com/react-hook/use-script\u003e, \u003chttps://vueuse.org/core/useScriptTag/\u003e\n- [x] [useSessionStorage](/src/hooks/useSessionStorage): \u003chttps://usehooks.com/usesessionstorage\u003e, \u003chttps://usehooks-ts.com/react-hook/use-session-storage\u003e, \u003chttps://vueuse.org/core/useSessionStorage/\u003e\n- [x] [useState](/src/hooks/useState)\n- [x] [useThrottle](/src/hooks/useThrottle): \u003chttps://usehooks.com/usethrottle\u003e, \u003chttps://vueuse.org/shared/useThrottleFn/\u003e\n- [x] [useThrottleFn](/src/hooks/useThrottleFn): \u003chttps://usehooks.com/usethrottle\u003e, \u003chttps://vueuse.org/shared/useThrottleFn/\u003e\n- [x] [useTimeout](/src/hooks/useTimeout): \u003chttps://vueuse.org/shared/useTimeout/\u003e, \u003chttps://usehooks.com/usetimeout\u003e, \u003chttps://usehooks-ts.com/react-hook/use-timeout\u003e\n- [x] [useTimeoutFn](/src/hooks/useTimeoutFn): \u003chttps://vueuse.org/shared/useTimeoutFn/\u003e\n- [x] [useToggle](/src/hooks/useToggle): \u003chttps://usehooks-ts.com/react-hook/use-toggle\u003e, \u003chttps://usehooks.com/usetoggle\u003e, \u003chttps://vueuse.org/shared/useToggle/\u003e\n- [x] [useWindowSize](/src/hooks/useWindowSize): \u003chttps://usehooks.com/usewindowsize\u003e, \u003chttps://usehooks-ts.com/react-hook/use-window-size\u003e, \u003chttps://vueuse.org/core/useWindowSize/\u003e\n\n\u003c!--  --\u003e\n\n- [ ] [useReducer](/src/hooks/useReducer)\n- [ ] useLocation (https://vueuse.org/core/useBrowserLocation/)\n- [ ] useEventCallback: \u003chttps://usehooks-ts.com/react-hook/use-event-callback\u003e\n- [ ] usePreferredDark (https://vueuse.org/core/usePreferredDark/)\n- [ ] useCountdown (https://usehooks-ts.com/react-hook/use-countdown, https://usehooks.com/usecountdown)\n- [ ] useIntersectionObserver (https://usehooks-ts.com/react-hook/use-intersection-observer, https://usehooks.com/useintersectionobserver, https://vueuse.org/core/useIntersectionObserver/)\n- [ ] useMouseInElement (https://vueuse.org/core/useMouseInElement/, https://usehooks.com/usemouse)\n- [ ] useRandomInterval (https://usehooks.com/userandominterval)\n- [ ] useNow (https://vueuse.org/core/useNow/)\n- [ ] useIsClient (https://usehooks-ts.com/react-hook/use-is-client, https://usehooks.com/useisclient)\n- [ ] useTimestamp (https://vueuse.org/core/useTimestamp/)\n- [ ] useTransition (https://vueuse.org/core/useTransition/)\n- [ ] usePrevious (https://usehooks.com/useprevious, https://vueuse.org/core/usePrevious/)\n- [ ] useNetwork (https://vueuse.org/core/useNetwork/, https://usehooks.com/usenetworkstate)\n- [ ] useOrientation (https://usehooks.com/useorientation, https://vueuse.org/core/useScreenOrientation/)\n- [ ] usePreferredLanguage (https://usehooks.com/usepreferredlanguage, https://vueuse.org/core/usePreferredLanguages/)\n- [ ] useRetry (https://usehooks.com/usecontinuousretry)\n- [ ] useVisibilityChange (https://usehooks.com/usevisibilitychange, https://vueuse.org/core/useDocumentVisibility/)\n- [ ] useRenderInfo (https://usehooks.com/userenderinfo)\n- [ ] useRenderCount (https://usehooks.com/userendercount)\n- [ ] useIsFirstRender (https://usehooks-ts.com/react-hook/use-is-first-render, https://usehooks.com/useisfirstrender)\n- [ ] useLongPress (https://usehooks.com/uselongpress, https://vueuse.org/core/onLongPress/)\n- [ ] useFavicon (https://usehooks.com/usefavicon, https://vueuse.org/core/useFavicon/)\n- [ ] useDefault (https://usehooks.com/usedefault)\n- [ ] useWindowScroll (https://usehooks.com/usewindowscroll, https://vueuse.org/core/useWindowScroll/)\n- [ ] useWindowFocus (https://vueuse.org/core/useWindowFocus/)\n- [ ] useMeasure (https://usehooks.com/usemeasure)\n- [ ] useList (https://usehooks.com/uselist)\n- [ ] useLockBodyScroll (https://usehooks.com/uselockbodyscroll, https://usehooks-ts.com/react-hook/use-locked-body)\n- [ ] useScroll (https://vueuse.org/core/useScroll/)\n- [ ] useScrollLock (https://vueuse.org/core/useScrollLock/)\n- [ ] useQueue (https://usehooks.com/usequeue)\n- [ ] useKeyPress (https://usehooks.com/usekeypress)\n- [ ] useTimeoutPoll (https://vueuse.org/core/useTimeoutPoll/, )\n- [ ] useSet (https://usehooks.com/useset, https://vueuse.org/shared/set/)\n- [ ] useIdle (https://usehooks.com/useidle, https://vueuse.org/core/useIdle/)\n- [ ] useHistory (https://usehooks.com/usehistorystate, https://vueuse.org/core/useRefHistory/, )\n- [ ] useThrottledHistory (https://vueuse.org/core/useThrottledRefHistory/)\n- [ ] useDebouncedHistory (https://vueuse.org/core/useDebouncedRefHistory/)\n- [ ] useManualHistory (https://vueuse.org/core/useManualRefHistory/)\n- [ ] usePageLeave (https://usehooks.com/usepageleave, https://vueuse.org/core/usePageLeave/)\n- [ ] useObjectState (https://usehooks.com/useobjectstate)\n- [ ] isMounted (https://usehooks-ts.com/react-hook/use-is-mounted)\n- [ ] useFullScreen (https://vueuse.org/core/useFullscreen/)\n- [ ] useSsr (https://usehooks-ts.com/react-hook/use-ssr)\n- [ ] useStep (https://usehooks-ts.com/react-hook/use-step)\n- [ ] useStepper (https://vueuse.org/core/useStepper/)\n- [ ] useTernaryDarkMode (https://usehooks-ts.com/react-hook/use-ternary-dark-mode)\n- [ ] useAsyncState (https://vueuse.org/core/useAsyncState/)\n- [ ] useLastChanged (https://vueuse.org/shared/useLastChanged/)\n- [ ] useStorage (https://vueuse.org/core/useStorage/)\n- [ ] useActiveElement (https://vueuse.org/core/useActiveElement/)\n- [ ] useDraggable (https://vueuse.org/core/useDraggable/)\n- [ ] useDropZone (https://vueuse.org/core/useDropZone/)\n- [ ] useElementBounding (https://vueuse.org/core/useElementBounding/)\n- [ ] useElementVisibility (https://vueuse.org/core/useElementVisibility/)\n- [ ] useMutationObserver (https://vueuse.org/core/useMutationObserver/)\n- [ ] useParentElement (https://vueuse.org/core/useParentElement/)\n- [ ] useBreakpoints (https://vueuse.org/core/useBreakpoints/)\n- [ ] useBroadcastChannel (https://vueuse.org/core/useBroadcastChannel/)\n- [ ] useColorMode (https://vueuse.org/core/useColorMode/)\n- [ ] useCssVar (https://vueuse.org/core/useCssVar/)\n- [ ] useEyeDropper (https://vueuse.org/core/useEyeDropper/)\n- [ ] useFileDialog (https://vueuse.org/core/useFileDialog/)\n- [ ] useFileSystemAccess (https://vueuse.org/core/useFileSystemAccess/)\n- [ ] useMediaControls (https://vueuse.org/core/useMediaControls/)\n- [ ] useMemory (https://vueuse.org/core/useMemory/)\n- [ ] useObjectUrl (https://vueuse.org/core/useObjectUrl/)\n- [ ] usePerformanceObserver (https://vueuse.org/core/usePerformanceObserver/)\n- [ ] usePermission (https://vueuse.org/core/usePermission/)\n- [ ] usePreferredColorScheme (https://vueuse.org/core/usePreferredColorScheme/)\n- [ ] usePreferredContrast (https://vueuse.org/core/usePreferredContrast/)\n- [ ] usePreferredReducedMotion (https://vueuse.org/core/usePreferredReducedMotion/)\n- [ ] useStyleTag (https://vueuse.org/core/useStyleTag/)\n- [ ] useTextareaAutosize (https://vueuse.org/core/useTextareaAutosize/)\n- [ ] useTextDirection (https://vueuse.org/core/useTextDirection/)\n- [ ] useUrlSearchParams (https://vueuse.org/core/useUrlSearchParams/?foo=bar\u0026vueuse=awesome)\n- [ ] useWakeLock (https://vueuse.org/core/useWakeLock/)\n- [ ] useWebNotification (https://vueuse.org/core/useWebNotification/)\n- [ ] onStartTyping (https://vueuse.org/core/onStartTyping/)\n- [ ] useFocus (https://vueuse.org/core/useFocus/)\n- [ ] useFocusWithin (https://vueuse.org/core/useFocusWithin/)\n- [ ] useInfiniteScroll (https://vueuse.org/core/useInfiniteScroll/)\n- [ ] useKeyModifier (https://vueuse.org/core/useKeyModifier/)\n- [ ] useMagicKeys (https://vueuse.org/core/useMagicKeys/)\n- [ ] useMouse (https://vueuse.org/core/useMouse/)\n- [ ] useMousePressed (https://vueuse.org/core/useMousePressed/)\n- [ ] useNavigatorLanguage (https://vueuse.org/core/useNavigatorLanguage/)\n- [ ] useOnline (https://vueuse.org/core/useOnline/)\n- [ ] usePointer (https://vueuse.org/core/usePointer/)\n- [ ] usePointerLock (https://vueuse.org/core/usePointerLock/)\n- [ ] usePointerSwipe (https://vueuse.org/core/usePointerSwipe/)\n- [ ] useSpeechRecognition (https://vueuse.org/core/useSpeechRecognition/)\n- [ ] useSpeechSynthesis (https://vueuse.org/core/useSpeechSynthesis/)\n- [ ] useSwipe (https://vueuse.org/core/useSwipe/)\n- [ ] useTextSelection (https://vueuse.org/core/useTextSelection/)\n- [ ] useUserMedia (https://vueuse.org/core/useUserMedia/)\n- [ ] useWebSocket (https://vueuse.org/core/useWebSocket/)\n\n## Author\n\n```json\n{\n\t\"name\": \"Dimas López Zurita\",\n\t\"role\": \"Senior Software Engineer\",\n\t\"alias\": \"dimaslz\",\n\t\"linkedin\": \"https://www.linkedin.com/in/dimaslopezzurita\",\n\t\"github\": \"https://github.com/dimaslz\",\n\t\"twitter\": \"https://twitter.com/dimaslz\",\n\t\"tags\": \"tooling, docker, tailwindcss, vue, SAAS, nodejs+express\"\n}\n```\n\n## My other projects\n\n- [https://ng-heroicons.dimaslz.dev/](https://ng-heroicons.dimaslz.dev/): An Angular components library to use Heroicons.com in your Angular projects.\n- [https://randomdata.loremapi.io/](https://randomdata.loremapi.io/): A tool to create mock Api responses with your custom schema.\n- [https://svg-icon-2-fw-component.dimaslz.dev](https://svg-icon-2-fw-component.dimaslz.dev): A tool to create a framework icon component from a SVG\n- [https://loremapi.io](https://loremapi.io): Mock and document your Api's\n- [https://cv.dimaslz.dev](https://cv.dimaslz.dev): My online CV\n- [https://api.dimaslz.dev](https://api.dimaslz.dev): My professional info by API\n- [https://dimaslz.dev](https://dimaslz.dev): Dev landing\n- [https://dimaslz.com](https://dimaslz.com): Profesional landing profile\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdimaslz%2Fsvelteuse","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdimaslz%2Fsvelteuse","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdimaslz%2Fsvelteuse/lists"}