Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.
Awesome Lists | Featured Topics | Projects
https://github.com/dimaslz/svelteuse

Svelte hooks like React
https://github.com/dimaslz/svelteuse
hooks library sveltejs
Last synced: 3 months ago
JSON representation
Svelte hooks like React
Host: GitHub
URL: https://github.com/dimaslz/svelteuse
Owner: dimaslz
License: mit
Created: 2023-10-07T17:25:34.000Z (about 1 year ago)
Default Branch: main
Last Pushed: 2024-08-26T23:04:52.000Z (4 months ago)
Last Synced: 2024-09-29T11:51:48.446Z (3 months ago)
Topics: hooks, library, sveltejs
Language: Svelte
Homepage: https://svelteuse.dimaslz.dev
Size: 991 KB
Stars: 3
Watchers: 1
Forks: 0
Open Issues: 1
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project

README

        # SvelteUse

List 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).

## 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](/src/hooks/useBoolean): 

- [x] [useClickAnyWhere](/src/hooks/useClickAnyWhere): 

- [x] [useClickOutside](/src/hooks/useClickOutside): , 

- [x] [useClipboard](/src/hooks/useClipboard): , , 

- [x] [useCounter](/src/hooks/useCounter): , , 

- [x] [useDarkMode](/src/hooks/useDarkMode): , 

- [x] [useDebounce](/src/hooks/useDebounce): , , 

- [x] [useDebounceFn](/src/hooks/useDebounce): , , 

- [x] [useDocumentTitle](/src/hooks/useDocumentTitle): , , 

- [x] [useElementSize](/src/hooks/useElementSize): , , 

- [x] [useEventListener](/src/hooks/useEventListener): , , 

- [x] [useFetch](/src/hooks/useFetch): , , 

- [x] [useHover](/src/hooks/useHover): , , 

- [x] [useImageOnLoad](/src/hooks/useImageOnLoad): , 

- [x] [useInterval](/src/hooks/useInterval): , , 

- [x] [useIntervalFn](/src/hooks/useIntervalFn): , 

- [x] [useLocalStorage](/src/hooks/useLocalStorage): , , 

- [x] [useMap](/src/hooks/useMap): , , 

- [x] [useMediaQuery](/src/hooks/useMediaQuery): , , 

- [x] [useScreen](/src/hooks/useScreen): 

- [x] [useScript](/src/hooks/useScript): , , 

- [x] [useSessionStorage](/src/hooks/useSessionStorage): , , 

- [x] [useState](/src/hooks/useState)

- [x] [useThrottle](/src/hooks/useThrottle): , 

- [x] [useThrottleFn](/src/hooks/useThrottleFn): , 

- [x] [useTimeout](/src/hooks/useTimeout): , , 

- [x] [useTimeoutFn](/src/hooks/useTimeoutFn): 

- [x] [useToggle](/src/hooks/useToggle): , , 

- [x] [useWindowSize](/src/hooks/useWindowSize): , , 

- [ ] [useReducer](/src/hooks/useReducer)

- [ ] useLocation (https://vueuse.org/core/useBrowserLocation/)

- [ ] useEventCallback: 

- [ ] 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

```json

{

	"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/](https://ng-heroicons.dimaslz.dev/): An Angular components library to use Heroicons.com in your Angular projects.

- [https://randomdata.loremapi.io/](https://randomdata.loremapi.io/): A tool to create mock Api responses with your custom schema.

- [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

- [https://loremapi.io](https://loremapi.io): Mock and document your Api's

- [https://cv.dimaslz.dev](https://cv.dimaslz.dev): My online CV

- [https://api.dimaslz.dev](https://api.dimaslz.dev): My professional info by API

- [https://dimaslz.dev](https://dimaslz.dev): Dev landing

- [https://dimaslz.com](https://dimaslz.com): Profesional landing profile