feat: Added use-counter.

Author: Blankeos

README.md

@@ -52,7 +52,7 @@ Based on the [@mantine/hooks](https://github.com/mantinedev/mantine/tree/master/
 - [x] use-click-outside
 - [ ] use-clipboard
 - [ ] use-color-scheme
-- [ ] use-counter
+- [x] use-counter
 - [ ] use-debounced-callback
 - [ ] use-debounced-state
 - [ ] use-debounced-value
@@ -80,7 +80,7 @@ Based on the [@mantine/hooks](https://github.com/mantinedev/mantine/tree/master/
 - [ ] use-intersection
 - [ ] use-interval
 - [ ] use-is-first-render
-- [ ] use-isomorphic-effect
+- [x] ~~use-isomorphic-effect~~ (Solid's [`createEffect`](https://docs.solidjs.com/reference/basic-reactivity/create-effect) is actually isomorphic - it works in browser and server).
 - [ ] use-list-state
 - [x] use-local-storage
 - [ ] use-logger

dev/components/examples/use-counter/use-counter.code.mdx

@@ -0,0 +1,21 @@
+```tsx
+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>;
+)
+```

dev/components/examples/use-counter/use-counter.example.tsx

@@ -0,0 +1,48 @@
+import { useCounter } from 'src';
+import { ExampleBase } from '../example-base';
+import Code from './use-counter.code.mdx';
+
+import { useMDXComponents } from 'solid-jsx';
+
+export function UseCounterExample() {
+  const [count, { decrement, increment, reset, set }] = useCounter(5, { min: 1, max: 10 });
+
+  // @ts-ignore
+  const components: any = useMDXComponents();
+
+  return (
+    <ExampleBase
+      title="useCounter"
+      description="A hook that returns a signal with a counter value and functions to increment, decrement, set and reset the counter."
+      code={<Code components={components} />}
+    >
+      <div class="flex h-full w-full flex-col items-center justify-center gap-5 gap-x-1 rounded-md border p-3 py-10 text-center">
+        <span>{count()}</span>
+
+        <div class="flex gap-x-2 text-sm">
+          <button
+            class="rounded-md border p-1 px-1.5 transition active:scale-90"
+            onClick={decrement}
+          >
+            -
+          </button>
+          <button
+            class="rounded-md border p-1 px-1.5 transition active:scale-90"
+            onClick={increment}
+          >
+            +
+          </button>
+          <button class="rounded-md border p-1 px-1.5 transition active:scale-90" onClick={reset}>
+            Reset
+          </button>
+          <button
+            class="rounded-md border p-1 px-1.5 transition active:scale-90"
+            onClick={() => set(Math.floor(Math.random() * 10))}
+          >
+            Set (To Random)
+          </button>
+        </div>
+      </div>
+    </ExampleBase>
+  );
+}

dev/components/examples/use-local-storage/use-local-storage.example.tsx

@@ -19,8 +19,9 @@ export function UseLocalStorageExample() {
       title="useLocalStorage"
       description={
         <>
-          A hook that allows using value from the localStorage as a signal The hook works the same
-          way as createSignal, but also writes the value to the localStorage.
+          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!
           <br />
           <br />
           To test, try changing the value with two tabs open.

dev/components/markdown/markdown.context.tsx

@@ -17,16 +17,20 @@ export function MarkdownContextProvider(props: FlowProps) {
   return (
     <MDXProvider
       components={{
-        code(props: any): JSX.Element {
+        code(codeProps: any): JSX.Element {
           const [ref, setRef] = createSignal<HTMLPreElement | undefined>();
           const [copied, setCopied] = createSignal(false);
 
+          const originalContent = codeProps.children;
+
           createEffect(async () => {
             const current = ref();
-            const content = props.children;
+            const content = originalContent;
 
             if (current && content) {
-              const language = props.className.slice(props.className.indexOf('language-') + 9); // 9 chars of 'langauge-'. Stripped
+              const language = codeProps.className.slice(
+                codeProps.className.indexOf('language-') + 9,
+              ); // 9 chars of 'langauge-'. Stripped
               console.log();
               const result = await codeToHtml(content, {
                 lang: 'tsx',
@@ -41,7 +45,7 @@ export function MarkdownContextProvider(props: FlowProps) {
               <button
                 class="absolute right-0 top-0 p-2 text-neutral-50 opacity-50 transition will-change-transform active:scale-95"
                 onClick={() => {
-                  navigator.clipboard.writeText(props.children);
+                  navigator.clipboard.writeText(originalContent);
                   setCopied(true);
                   setTimeout(() => {
                     setCopied(false);
@@ -56,7 +60,7 @@ export function MarkdownContextProvider(props: FlowProps) {
               </button>
               <div ref={setRef} class="text-sm">
                 {/* This will be replaced with the code element, but render it at first paint with opacity 0 so it takes up space. */}
-                <div class="opacity-0">{props.children}</div>
+                <div class="opacity-0">{originalContent}</div>
               </div>
             </div>
           );

dev/pages/index/+Page.tsx

@@ -4,6 +4,7 @@ import packageJSON from 'src/../package.json';
 
 // Hooks
 import { UseClickOutsideExample } from 'dev/components/examples/use-click-outside/use-click-outside.example';
+import { UseCounterExample } from 'dev/components/examples/use-counter/use-counter.example';
 import { UseElementSizeExample } from 'dev/components/examples/use-element-size/use-element-size.example';
 import { UseEyeDropperExample } from 'dev/components/examples/use-eye-dropper/use-eye-dropper.example';
 import { UseFaviconExample } from 'dev/components/examples/use-favicon/use-favicon.example';
@@ -43,6 +44,10 @@ export default function HomePage() {
   const [searchInput, setSearchInput] = createSignal('');
 
   const LIST = [
+    {
+      title: 'useCounter',
+      example: <UseCounterExample />,
+    },
     {
       title: 'useOS',
       example: <UseOsExample />,

src/index.ts

@@ -1,4 +1,5 @@
 export * from './use-click-outside/use-click-outside';
+export * from './use-counter/use-counter';
 export * from './use-eye-dropper/use-eye-dropper';
 export * from './use-favicon/use-favicon';
 export * from './use-hotkeys/use-hotkeys';

src/use-counter/use-counter.ts

@@ -0,0 +1,42 @@
+// ./clamp.ts
+
+function clamp(value: number, min: number | undefined, max: number | undefined) {
+  if (min === undefined && max === undefined) {
+    return value;
+  }
+
+  if (min !== undefined && max === undefined) {
+    return Math.max(value, min);
+  }
+
+  if (min === undefined && max !== undefined) {
+    return Math.min(value, max);
+  }
+
+  return Math.min(Math.max(value, min!), max!);
+}
+
+// ./use-counter.ts
+import { createSignal } from 'solid-js';
+
+const DEFAULT_OPTIONS = {
+  min: -Infinity,
+  max: Infinity,
+};
+
+/**
+ * A hook that returns a signal with a counter value and functions to increment, decrement, set and reset the counter.
+ */
+export function useCounter(
+  initialValue = 0,
+  options: Partial<{ min: number; max: number }> = DEFAULT_OPTIONS,
+) {
+  const [count, setCount] = createSignal<number>(clamp(initialValue, options?.min, options?.max));
+
+  const increment = () => setCount(current => clamp(current + 1, options?.min, options?.max));
+  const decrement = () => setCount(current => clamp(current - 1, options?.min, options?.max));
+  const set = (value: number) => setCount(clamp(value, options?.min, options?.max));
+  const reset = () => setCount(clamp(initialValue, options?.min, options?.max));
+
+  return [count, { increment, decrement, set, reset }] as const;
+}