Svelteuse

dimaslz
4

Svelte hooks like React

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

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

Top categories

tailwind daisyui admin template popup mdsvex portfolio blog form ecommerce ui carousel auth dark seo image routing