@dimaslz/svelteuse

v0.0.2

Published

2 months ago

Svelte hooks like React

Downloads

156

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

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme