feat: Added use-toggle.

README.md

@@ -40,7 +40,7 @@ We want to achieve as 1:1 as possible with Mantine's original hooks. So you can
 - 🌳 Tree-shakable
 - 🖌️ TypeScript support
 - 🔵 For SolidJS
-- 📦 Zero-dependencies
+- 📦 Zero-dependencies (except Solid)
 
 ## Roadmap
 
@@ -111,7 +111,7 @@ Based on the [@mantine/hooks](https://github.com/mantinedev/mantine/tree/master/
 - [ ] use-throttled-state
 - [ ] use-throttled-value
 - [ ] use-timeout
-- [ ] use-toggle
+- [x] use-toggle
 - [ ] use-uncontrolled
 - [ ] use-validated-state
 - [ ] use-viewport-size

dev/App.tsx

@@ -2,7 +2,15 @@ import type { Component } from 'solid-js';
 import './app.css';
 
 // Hooks
-import { useClickOutside, useHotkeys, useHover, useIdle, useNetwork, useOs } from '../src';
+import {
+  useClickOutside,
+  useHotkeys,
+  useHover,
+  useIdle,
+  useNetwork,
+  useOs,
+  useToggle,
+} from '../src';
 
 const App: Component = () => {
   // let ref = useClickOutside(() => {
@@ -20,6 +28,8 @@ const App: Component = () => {
 
   const networkStatus = useNetwork();
 
+  const [currentOption, toggle] = useToggle(['light', 'dark', 'system']);
+
   return (
     <div class="">
       {/* <p class="bg-green-500" ref={ref}>
@@ -33,6 +43,8 @@ const App: Component = () => {
       <p>idle: {JSON.stringify(idle())}</p>
 
       <p>networkStatus: {JSON.stringify(networkStatus())}</p>
+
+      <button onClick={() => toggle()}>Current Toggled: {JSON.stringify(currentOption())}</button>
     </div>
   );
 };

src/index.ts

@@ -5,3 +5,4 @@ export * from './use-idle/use-idle';
 export * from './use-mounted/use-mounted';
 export * from './use-network/use-network';
 export * from './use-os/use-os';
+export * from './use-toggle/use-toggle';

src/use-toggle/use-toggle.ts

@@ -0,0 +1,23 @@
+import { createMemo, createSignal } from 'solid-js';
+
+/**
+ * A hook that toggles between two or multiple values (by implementing a common state pattern).
+ */
+export function useToggle<T = boolean>(options: readonly T[] = [false, true] as any) {
+  const [_options, _setOptions] = createSignal<typeof options>(options);
+
+  function toggle() {
+    const value = _options()[0]!;
+    const index = Math.abs(_options()!.indexOf(value));
+
+    _setOptions(
+      _options()!
+        .slice(index + 1)
+        .concat(value),
+    );
+  }
+
+  const currentOption = createMemo(() => _options()[0]);
+
+  return [currentOption, toggle] as const;
+}