docs: Updated docs to include use-local-storage-store.

Author: Blankeos

dev/components/examples/use-local-storage-store/use-local-storage-store.code.mdx

@@ -0,0 +1,53 @@
+```tsx
+const [value, setValue] = useLocalStorageStore<{ id: string; name: string }[]>({
+  key: 'todos-store',
+  defaultValue: [],
+});
+
+return (
+  <div>
+    <For each={value}>
+      {(todo, index) => {
+        return (
+          <div>
+            <input
+              value={todo.name}
+              onInput={event => {
+                setValue(
+                  produce(_value => {
+                    if (!_value[index()]) return;
+                    _value[index()]!.name = event.target.value ?? '';
+                  }),
+                );
+              }}
+            />
+            <button
+              onClick={() => {
+                setValue(
+                  produce(_value => {
+                    _value.splice(index(), 1);
+                  }),
+                );
+              }}
+            >
+              <IconClose width={18} height={18} />
+            </button>
+          </div>
+        );
+      }}
+    </For>
+
+    <button
+      onClick={() => {
+        setValue(
+          produce(_value => {
+            _value.push({ id: Math.random().toString(), name: 'New Todo' });
+          }),
+        );
+      }}
+    >
+      New Todo
+    </button>
+  </div>
+);
+```

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

@@ -0,0 +1,80 @@
+import { useLocalStorageStore } from 'src';
+import { ExampleBase } from '../example-base';
+import Code from './use-local-storage-store.code.mdx';
+
+import { IconClose } from 'dev/icons';
+import { For } from 'solid-js';
+import { produce } from 'solid-js/store';
+import { useMDXComponents } from 'solid-jsx';
+
+export function UseLocalStorageStoreExample() {
+  const [value, setValue] = useLocalStorageStore<{ id: string; name: string }[]>({
+    key: 'todos-store',
+    defaultValue: [],
+  });
+
+  // @ts-ignore
+  const components: any = useMDXComponents();
+
+  return (
+    <ExampleBase
+      title="useLocalStorageStore"
+      description={
+        <>
+          (Improvement) A hook that allows using value from the localStorage as a store. The hook
+          works exactly the same way as createStore, 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.
+        </>
+      }
+      code={<Code components={components} />}
+    >
+      <div class="flex h-full w-full flex-col items-center justify-center gap-3 rounded-md border p-3 py-10 text-center transition-colors">
+        <For each={value}>
+          {(todo, index) => (
+            <div class="flex flex-wrap items-center gap-1 text-sm">
+              <input
+                class="rounded-md border p-1"
+                value={todo.name}
+                onInput={event => {
+                  setValue(
+                    produce(_value => {
+                      if (!_value[index()]) return;
+                      _value[index()]!.name = event.target.value ?? '';
+                    }),
+                  );
+                }}
+              />
+              <button
+                onClick={() => {
+                  setValue(
+                    produce(_value => {
+                      _value.splice(index(), 1);
+                    }),
+                  );
+                }}
+              >
+                <IconClose width={18} height={18} />
+              </button>
+            </div>
+          )}
+        </For>
+
+        <button
+          class={`rounded-md bg-primary px-3 py-1.5 text-white transition active:scale-95`}
+          onClick={() => {
+            setValue(
+              produce(_value => {
+                _value.push({ id: Math.random().toString(), name: 'New Todo' });
+              }),
+            );
+          }}
+        >
+          New Todo
+        </button>
+      </div>
+    </ExampleBase>
+  );
+}

dev/icons/close.tsx

@@ -0,0 +1,12 @@
+import { JSX, VoidProps } from 'solid-js';
+
+export default function Code(props: VoidProps<JSX.SvgSVGAttributes<SVGSVGElement>>) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" {...props}>
+      <path
+        fill="currentColor"
+        d="m12 13.4l-2.917 2.925q-.277.275-.704.275t-.704-.275q-.275-.275-.275-.7t.275-.7L10.6 12L7.675 9.108Q7.4 8.831 7.4 8.404t.275-.704q.275-.275.7-.275t.7.275L12 10.625L14.892 7.7q.277-.275.704-.275t.704.275q.3.3.3.713t-.3.687L13.375 12l2.925 2.917q.275.277.275.704t-.275.704q-.3.3-.712.3t-.688-.3z"
+      />
+    </svg>
+  );
+}

dev/icons/index.ts

@@ -1,8 +1,10 @@
 export { default as IconCheck } from './check';
+export { default as IconClose } from './close';
 export { default as IconCode } from './code';
 export { default as IconCopy } from './copy';
 export { default as IconEyeDropper } from './eye-dropper';
 export { default as IconGithub } from './github';
 export { default as IconLogo } from './logo';
 export { default as IconSolidJS } from './solidjs';
 export { default as IconX } from './x';
+

dev/pages/index/+Page.tsx

@@ -24,6 +24,7 @@ import { UseInViewportExample } from 'dev/components/examples/use-in-viewport/us
 import { UseInputStateExample } from 'dev/components/examples/use-input-state/use-input-state.example';
 import { UseIntersectionExample } from 'dev/components/examples/use-intersection/use-intersection.example';
 import { UseKeyboardExample } from 'dev/components/examples/use-keyboard/use-keyboard.example';
+import { UseLocalStorageStoreExample } from 'dev/components/examples/use-local-storage-store/use-local-storage-store.example';
 import { UseLocalStorageExample } from 'dev/components/examples/use-local-storage/use-local-storage.example';
 import { UseMediaQueryExample } from 'dev/components/examples/use-media-query/use-media-query.example';
 import { UseMountedExample } from 'dev/components/examples/use-mounted/use-mounted.example';
@@ -178,6 +179,10 @@ export default function HomePage() {
       title: 'useDocumentTitle',
       example: <UseDocumentTitleExample />,
     },
+    {
+      title: 'useLocalStorageStore',
+      example: <UseLocalStorageStoreExample />,
+    },
   ];
 
   const filteredList = createMemo(() => {