Created useCookie hook

Author: NukeJS

demo/src/pages/hooks/useCookie.tsx

@@ -0,0 +1,23 @@
+import type { Component } from 'solid-js';
+import { createSignal } from 'solid-js';
+import { useCookie } from 'solidjs-hooks';
+
+const HookPage: Component = () => {
+  const [cookie, setCookie, removeCookie] = useCookie('my-cookie');
+  const [count, setCount] = createSignal(0);
+
+  const setCookieHandler = () => {
+    setCount((prevCount) => prevCount + 1);
+    setCookie(`my-awesome-cookie-${count()}`);
+  };
+
+  return (
+    <div>
+      <p>Cookie value: {cookie()}</p>
+      <button onClick={() => setCookieHandler()}>Update Cookie</button>
+      <button onClick={() => removeCookie()}>Delete Cookie</button>
+    </div>
+  );
+};
+
+export default HookPage;

demo/src/pages/hooks/useCounter.tsx

@@ -1,27 +1,18 @@
 import type { Component } from 'solid-js';
-import { createSignal } from 'solid-js';
-import { useInterval } from 'solidjs-hooks';
+import { useCounter } from 'solidjs-hooks';
 
 const HookPage: Component = () => {
-  const DEFAULT_DELAY = 1000;
-  const [count, setCount] = createSignal(0);
-  const [delay, setDelay] = createSignal(DEFAULT_DELAY);
-
-  useInterval(() => {
-    setCount((prevCount) => prevCount + 1);
-  }, delay);
-
-  const toggleInterval = () => {
-    // @ts-ignore
-    setDelay((prevDelay) => (prevDelay ? null : DEFAULT_DELAY));
-  };
+  const { count, increment, decrement, set, reset } = useCounter();
 
   return (
     <div>
-      <p>Count: {count()}</p>
-      <div>
-        <button onClick={() => toggleInterval()}>Toggle Interval</button>
-      </div>
+      <p>Current count: {count()}</p>
+      <button onClick={() => increment()}>Increment</button>
+      <button onClick={() => increment(5)}>Increment (+5)</button>
+      <button onClick={() => decrement()}>Decrement</button>
+      <button onClick={() => decrement(5)}>Decrement (-5)</button>
+      <button onClick={() => set(100)}>Set to 100</button>
+      <button onClick={() => reset()}>Reset</button>
     </div>
   );
 };

demo/src/routes.ts

@@ -14,6 +14,10 @@ const routes: RouteDefinition[] = [
     path: '/use-boolean',
     component: lazy(() => import('./pages/hooks/useToggle')),
   },
+  {
+    path: '/use-cookie',
+    component: lazy(() => import('./pages/hooks/useCookie')),
+  },
   {
     path: '/use-counter',
     component: lazy(() => import('./pages/hooks/useCounter')),

packages/solidjs-hooks/README.md

@@ -21,6 +21,37 @@ This is an alias of [`useToggle`](#usetoggle).
 
 
 
+### `useCookie`
+
+SolidJS hook that returns the current value of a cookie, a callback to set the cookie's value, and a callback to remove the cookie.
+
+#### Usage
+
+```jsx
+import { createSignal } from 'solid-js';
+import { useCookie } from 'solidjs-hooks';
+
+const Demo = () => {
+  const [cookie, setCookie, removeCookie] = useCookie('my-cookie');
+  const [count, setCount] = createSignal(0);
+
+  const setCookieHandler = () => {
+    setCount((prevCount) => prevCount + 1);
+    setCookie(`my-awesome-cookie-${cookie()}`);
+  }
+
+  return (
+    <div>
+      <p>Cookie value: {cookie()}</p>
+      <button onClick={() => setCookieHandler()}>Update Cookie</button>
+      <button onClick={() => removeCookie()}>Delete Cookie</button>
+    </div>
+  )
+}
+```
+
+
+
 ### `useCounter`
 
 SolidJS state hook that tracks a numeric value.
@@ -44,7 +75,6 @@ const Demo = () => {
       <button onClick={() => decrement(5)}>Decrement (-5)</button>
       <button onClick={() => set(100)}>Set to 100</button>
       <button onClick={() => reset()}>Reset</button>
-      <button onClick={() => reset(25)}>Reset to 25</button>
     </div>
   )
 }

packages/solidjs-hooks/package.json

@@ -52,9 +52,13 @@
     "dist"
   ],
   "devDependencies": {
+    "@types/js-cookie": "^3.0.1",
     "@types/node": "^17.0.14",
     "pridepack": "1.0.3",
     "solid-js": "^1.3.5",
     "typescript": "^4.5.5"
+  },
+  "dependencies": {
+    "js-cookie": "^3.0.1"
   }
 }

packages/solidjs-hooks/src/hooks/index.ts

@@ -1,5 +1,6 @@
 export { default as useBoolean } from './useBoolean';
 export { default as useCounter } from './useCounter';
+export { default as useCookie } from './useCookie';
 export { default as useEffect } from './useEffect';
 export { default as useInterval } from './useInterval';
 export { default as useNumber } from './useNumber';

packages/solidjs-hooks/src/hooks/useCookie.ts

@@ -0,0 +1,27 @@
+import type { Accessor } from 'solid-js';
+import { createSignal } from 'solid-js';
+import Cookies from 'js-cookie';
+
+function useCookie(
+  key: string
+): [
+  Accessor<string | null>,
+  (newValue: string, options?: Cookies.CookieAttributes) => void,
+  () => void
+] {
+  const [cookie, setCookie] = createSignal(Cookies.get(key) || null);
+
+  const set = (newValue: string, options?: Cookies.CookieAttributes) => {
+    Cookies.set(key, newValue, options);
+    setCookie(newValue);
+  };
+
+  const remove = () => {
+    Cookies.remove(key);
+    setCookie(null);
+  };
+
+  return [cookie, set, remove];
+}
+
+export default useCookie;

packages/solidjs-hooks/tsconfig.json

@@ -3,6 +3,7 @@
   "compilerOptions": {
     "lib": ["DOM"],
     "declaration": true,
+    "esModuleInterop": true,
     "jsx": "react"
   }
 }