Bagon Hooks

v0.0.3

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

> install bagon-hooks

useCounter

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

const [count, { decrement, increment, reset, set }] = useCounter(5, { min: 1, max: 10 });

return (
    <div>
        {count()}
        <button onClick={decrement}>-</button>
        <button onClick={increment}>+</button>

        <button onClick={reset}>
            Reset
        </button>

        <button
            onClick={() => set(Math.floor(Math.random() * 10))}
        >
            Set (To Random)
        </button>
    </div>;
)

useOs

Returns the current OS

Current OS: undetermined

const os = useOs();

return (
    <div>
        Current OS: {os()}
    </div>;
)

useClickOutside

Detects clicks outside a ref

No detections

const ref = useClickOutside(() => {
    console.log('Clicked outside!');
});

return (
    <div ref={ref}>
    </div>;
)

useHotkeys

Handle hotkeys easily

ctrl + a

ctrl + Enter

shift + g

useHotkeys([
  ['mod+a', () => alert('Ctrl+Shift+A pressed')],
  ['mod+Enter', () => alert('Alt+Shift+A pressed')],
  ['shift+g', () => alert('Alt+A pressed')],
]);

useHover

Detects hovers on a ref

No detections

const { ref, hovered } = useHover();

return (
    <div ref={ref}>
    </div>;
)

useIdle

Returns if user has been idle after some milliseconds

Is Idle (1s):true

const idle = useIdle(1000);

return (
    <div>
        Is Idle: {idle().toString()}
    </div>;
)

useMounted

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

const mounted = useMounted();

return (
    <div>
        <Show when={mounted()}>
            This only shows on the client.
        </Show>
    </div>;
)

useNetwork

Returns information about current user's network connection. Try going offline on DevTools.

{
  "online": true
}

const networkStatus = useNetwork();

return (
    <div>
        {JSON.stringify(networkStatus(), null, 2)}
    </div>;
)

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

const [ref, rectStore] = useResizeObserver();

return (
  <div>
    <textarea ref={ref}></textarea>
    {JSON.stringify(rectStore, null, 2)}
  </div>
);

useElementSize

Returns width and height of a resizable element. An abstraction over useResizeObserver.

Width: 0.00Height: 0.00

Resize Me

const { ref, width, height } = useElementSize();

return (
  <div>
    <textarea ref={ref}></textarea>
    Width: {width().toFixed(2)}
    Height: {height().toFixed(2)}
  </div>
);

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

const [value, toggle] = useToggle(
    ['apple', 'orange', 'grape', 'kiwi'] as const
);

return <div>{value()}</div>;

useFavicon

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

  // ----------
  // Mantine Implementation
  // ----------

  const [favicon, setFavicon] = createSignal('https://docs.solidjs.com/favicon.svg');
  const setXFavicon = () => setFavicon('https://x.com/favicon.ico');
  const setSolidFavicon = () => setFavicon('https://docs.solidjs.com/favicon.svg');

  useFavicon(favicon); // Will always run at the start.

  return (
    <button onClick={setXFavicon}>Use X Favicon</button>
    <button onClick={setSolidFavicon}>Use SolidJS Favicon</button>
  )

  // ----------
  // Improved Bagon Implementation
  // ----------
  const [favicon, setFavicon] = useFavicon(); // Don't pass an initial accessor, choose to run when you need to.

  const setXFavicon = () => setFavicon('https://x.com/favicon.ico');
  const setSolidFavicon = () => setFavicon('https://docs.solidjs.com/favicon.svg');

  return (
    <button onClick={setXFavicon}>Use X Favicon</button>
    <button onClick={setSolidFavicon}>Use SolidJS Favicon</button>
  );

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

const [value, setValue] = useLocalStorage({
  key: 'color-scheme',
  defaultValue: 'dark',
});

// Value is set both to state and localStorage at 'color-scheme'
setValue('light');

// You can also use callback like in useState hook to set value
setValue(current => (current === 'dark' ? 'light' : 'dark'));

return <div>{value()}</div>;

useEyeDropper

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

Picked Color:

const { color, supported, pickColor } = useEyeDropper();

return (
  <div>
    <button onClick={pickColor} disabled={!supported()}>
      Pick Color
    </button>

    <div>
      Current Color: <span style={{ height: 32, width: 32, 'background-color': color() }} />
    </div>

    <Show when={supported() !== undefined && !supported()}>
      <span>Your browser does not support EyeDropper.</span>
    </Show>
  </div>
);