bagon-hooks

A collection of zero-dependency hooks for SolidJS forked directly from Mantine Hooks.

Quick start

Install it:

npm i bagon-hooks
# or
yarn add bagon-hooks
# or
pnpm add bagon-hooks
# or
bun add bagon-hooks

Use it:

import { useHotkeys } from 'bagon-hooks';

We want to achieve as 1:1 as possible with Mantine's original hooks. So you can always refer to their original docs. There are a few improvements and renaming because SolidJS has its own conventions. But just take note:

1. We removed Solid's convention of use vs create as it's too confusing for familiarity with Mantine. So every hook in Bagon is prefixed with use.
2. The only renaming we did was state -> signal.
3. Refer to Mantine's original docs for deeper examples and usecases.
4. Refer to Bagon Hooks's docs for actual SolidJS examples.

Features

• 🌳 Tree-shakable
• 🖌️ TypeScript support
• 🔵 For SolidJS
• 📦 Zero-dependencies (except Solid)

Roadmap

Hooks

Based on the @mantine/hooks library.

• use-callback-ref (Not needed, only used internally by mantine for preventing re-renders on a function)
• use-click-outside
• use-clipboard
• use-collapse
• use-horizontal-collapse
• use-color-scheme
• use-counter
• use-debounced-callback
• use-debounced-state use-debounced-signal
• use-debounced-value
• use-did-update
• use-disclosure (✨ Improved, slightly better than mantine thanks to set for passing to stuff like onOpenChange)
• use-document-title
• use-document-visibility
• use-drag
• use-event-listener
• use-eye-dropper (✨ improved, state management is inside the hook)
• use-favicon (✨ improved, more flexible, better control)
• use-fetch
• use-file-dialog
• use-floating-window
• use-focus-return
• use-focus-trap
• use-focus-within
• use-force-update (Not needed — Solid has fine-grained reactivity; no force re-render)
• use-fullscreen
• use-hash
• use-headroom
• use-hotkeys
• use-hover
• use-id (Added, but note that there is createUniqueId in Solid)
• use-idle (Added, but note that there is createIdleTimer the official solid-primitives as well)
• use-in-viewport
• use-input-state
• use-intersection (Added, but note that there is createIntersectionObserver in the official solid-primitives as well)
• use-interval
• use-is-first-render (Every component function in SolidJS runs only once! Every component is first render only 🙂)
• use-isomorphic-effect (Solid's createEffect is technically already isomorphic because it doesn't error on SSR. Also, it also only runs on client-side.)
• use-list-state
• use-local-storage
• use-local-storage-store (✨ Improved, more similar to 'createStore' API).
• use-logger (Omit — debug helper; prefer Solid DevTools)
• use-long-press
• use-map
• use-mask
• use-media-query
• use-merged-ref (Not needed — Solid refs compose differently; merge manually if required)
• use-mounted
• use-mouse
• use-move
• use-mutation-observer
• use-network
• use-orientation
• use-os
• use-page-leave
• use-pagination
• use-previous
• use-queue
• use-radial-move
• use-reduced-motion
• use-resize-observer
• use-roving-index
• use-scroll-direction
• use-scroll-into-view
• use-scroll-spy ✨ (scrollHost scoping + scrollTo(index) that won’t scroll ancestors)
• use-scroller
• use-selection
• use-session-storage
• use-set-state (Not needed — use createStore from solid-js/store)
• use-set
• use-shallow-effect (Not needed — Solid effects track precisely; no shallow-compare deps)
• use-splitter
• use-state-history
• use-text-selection
• use-throttled-callback
• use-throttled-state
• use-throttled-value
• use-timeout
• use-toggle
• use-uncontrolled
• use-validated-state
• use-viewport-size
• use-window-event (Not needed — use createEffect + addEventListener (or useEventListener))
• use-window-scroll
• utils (clamp, random-id, range)

New in Bagon Hooks

• use-keyboard (✨ Runs even on single keys as opposed useHotkeys that only runs on combinations, so more general usecases)
• use-disclosure-data (✨ Improved, an alternative to use-disclosure for data-driven disclosures. I use it)

Others

• Docs Website (Powered by mdx + tailwind prose)
• Examples
• Tests?

Contributing

This library is far from done. If you have time implementing the roadmap, feel free to submit a pull request. We always appreciate collaborators. If you find anything outdated, please make an issue. If you like this project, consider giving it a star! ⭐️

License

This project is licensed under the MIT License

Credits

• Mantine Hooks - amazing library for components and hooks, but currently not in SolidJS so we forked that part only.