Bagon Hooks

v0.0.4

A collection of 36+ zero-dependency hooks for SolidJS forked directly from Mantine Hooks, with some improvements.

> install bagon-hooks
Cmd
K

useCounter

A hook that returns a signal with a counter value and functions to increment, decrement, set and reset the counter.
5

useOs

Returns the current OS
Current OS: undetermined

useClickOutside

Detects clicks outside a ref
No detections

useHotkeys

Handle hotkeys easily
ctrl + a
ctrl + Enter
shift + g

useKeyboard

Use this for more general keyboard events, as opposed to useHotkeys.
a
b
c
d

useHover

Detects hovers on a ref
No detections

useIdle

Returns if user has been idle after some milliseconds
Is Idle (1s):true

useId

Returns a random id.
Random ID: 00001001070

useMounted

Returns true if component is mounted. Useful for rendering only on client-side.

useNetwork

Returns information about current user's network connection. Try going offline on DevTools.
{
  "online": true
}

useResizeObserver

Returns information about a resizable element. This is more low-level but gives you more than just width and height.
{
  "rect": {
    "x": 0,
    "y": 0,
    "width": 0,
    "height": 0,
    "top": 0,
    "left": 0,
    "bottom": 0,
    "right": 0
  }
}
Resize Me

useElementSize

Returns width and height of a resizable element. An abstraction over useResizeObserver.
Width: 0.00Height: 0.00
Resize Me

useToggle

A hook that toggles between two or multiple values (by implementing a common state pattern). Dev Note: Personally this can be called `useCycle` instead since it cycles through the options.
🍎 apple
🍊 orange
🍇 grape
🥝 kiwi

useFavicon

Appends <link /> element to head component with given favicon url. The hook is not called during server side rendering.

useLocalStorage

A hook that allows using value from the localStorage as a signal. The hook works exactly the same way as createSignal, but also writes the value to the localStorage. It even works between tabs!

To test, try changing the value with two tabs open.
Favorite Fruit: apple

useLocalStorageStore

(Improvement) A hook that allows using value from the localStorage as a store for complex and efficient state management. The hook works exactly the same way as createStore, but also writes the value to the localStorage. It even works between tabs!

To test, try changing the value with two tabs open.

useEyeDropper

A hook that gives you the ability to open the browser's EyeDropper API and save it to a signal.
Picked Color:

useFullscreen

A hook that allows you to enter and exit fullscreen mode. Can also optionally pass a ref of the element to be fullscreened.

useHash

A hook that allows you to get and set the hash value of the current URL like a signal.
Current hash:

useClipboard

A hook that wraps copy-to-clipboard logic with a signal.
Bagon is awesome!

useOrientation

Returns the current orientation of the device. Try tilting the device (if on your phone).
{
  "angle": 0,
  "type": "landscape-primary"
}

useMediaQuery

Returns a signal that tracks the current state of a media query. Try resizing the window.
No match

useMouse

Returns the current mouse position and an optional ref to the element that is being tracked.
Track Here
Mouse coordinates {"x":0,"y":0}

useMove

Handles move behavior over any element inside the constraints of a ref.

Can be used to make custom sliders, color pickers, and draggable elements within a container.
Values: {"x":"0.50","y":"0.50"}

useDebouncedSignal

Creates a signal that is debounced with a given wait time.
State: ""

useDebouncedValue

Debounced value from an existing signal.
State: ""|Value: ""

useDocumentVisibility

Returns the document.visibilityState - it allows detecting if the current tab is active.
Tab is currently visible

useIntersection

Returns intersection observer info about the element ref.
Obscured

useInViewport

Simpler alternative to useIntersection that only returns a bool.
Scroll to See Box
Obscured

useInputState

Handles state of native inputs with the onChange or onInput handlers. Syntax sugar over writing your own handler functions and types for the events.

You can treat this as the SolidJS way of Svelte's ease of use with `bind:value` and `bind:checked`
{"input":"","checkbox":false}

useDebouncedCallback

Creates a debounced version of a callback function, delaying its execution until a specified time has elapsed since the last invocation.

useDidUpdate

This hook works the same way as createEffect but it is not called when component is mounted.

Unlike createEffect, this always has a dependency of signals (like React's useEffect) for the reason that the only way to do this in Solid is using the on() + defer property under the hood.

This logs "Did Update X" to the console. Notice that it doesn't log "Did Update 0" since it happens on mount.

useColorScheme

A hook that returns system color scheme value i.e. either `dark` or `light`.
Your system color scheme is: light

useDocumentTitle

Sets the `document.title`. Hook is not called during server-side rendering. Only use this for client-only applications.
Home
About
Awesome

useDisclosure

A simple hook to manage state for dialogs, modals, accordions, etc. Anything that needs to open/close/toggle.