feat: Added use-document-title.

Author: Blankeos

README.md

@@ -56,14 +56,14 @@ Based on the [@mantine/hooks](https://github.com/mantinedev/mantine/tree/master/
 - [x] ~~use-callback-ref~~ (Not needed, only used internally by mantine for preventing re-renders on a function)
 - [x] use-click-outside
 - [x] use-clipboard
-- [ ] use-color-scheme
+- [x] use-color-scheme
 - [x] use-counter
 - [x] use-debounced-callback
 - [x] ~~use-debounced-state~~ use-debounced-signal
 - [x] use-debounced-value
 - [x] use-did-update
 - [ ] use-disclosure
-- [ ] use-document-title
+- [x] use-document-title
 - [x] use-document-visibility
 - [ ] use-event-listener
 - [x] use-eye-dropper (✨ improved, state management is inside the hook)
@@ -85,7 +85,7 @@ Based on the [@mantine/hooks](https://github.com/mantinedev/mantine/tree/master/
 - [x] use-intersection (Added, but note that there is [`createIntersectionObserver`](https://primitives.solidjs.community/package/intersection-observer/) in the official solid-primitives as well)
 - [ ] use-interval
 - [x] ~~use-is-first-render~~ (Every component function in SolidJS runs only once! Every component is first render only 🙂)
-- [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).
+- [x] ~~use-isomorphic-effect~~ (Solid's [`createEffect`](https://docs.solidjs.com/reference/basic-reactivity/create-effect) is technically already isomorphic because it doesn't error on SSR. Also, it also only runs on client-side.)
 - [ ] use-list-state
 - [x] use-local-storage
 - [ ] use-logger

dev/components/examples/use-document-title/use-document-title.code.mdx

@@ -0,0 +1,25 @@
+```tsx
+// ----------
+// Mantine Implementation
+// ----------
+
+const [title, setTitle] = createSignal('Home');
+useTitle(title); // Will always run at the start.
+
+return (
+    <button onClick={() => setTitle("Home")}>Set to Home</button>
+    <button onClick={() => setTitle("About")}>set to About</button>
+)
+
+// ----------
+// Improved Bagon Implementation
+// ----------
+const [title, setTitle] = useTitle(); // Don't pass an initial accessor, choose to run when you need to.
+
+
+return (
+    <button onClick={() => setTitle("Home")}>Set to Home</button>
+    <button onClick={() => setTitle("About")}>Set to About</button>
+);
+
+```

dev/components/examples/use-document-title/use-document-title.example.tsx

@@ -0,0 +1,35 @@
+import { useDocumentTitle, useToggle } from 'src';
+import { ExampleBase } from '../example-base';
+import Code from './use-document-title.code.mdx';
+
+import { Kbd } from 'dev/components/kbd';
+import { useMDXComponents } from 'solid-jsx';
+
+export function UseDocumentTitleExample() {
+  const [title, setTitle] = useDocumentTitle();
+  const [_, cycle] = useToggle(['Home', 'About', 'Awesome']);
+
+  // @ts-ignore
+  const components: any = useMDXComponents();
+
+  function _cycle() {
+    cycle();
+    setTitle(_() as any);
+  }
+  return (
+    <ExampleBase
+      title="useDocumentTitle"
+      description="Sets the `document.title`. Hook is not called during server-side rendering. Only use this for client-only applications."
+      code={<Code components={components} />}
+    >
+      <div class="flex h-full w-full flex-col items-center justify-center gap-x-1 rounded-md border p-3 py-10 text-center text-sm">
+        <div class="flex items-center gap-x-2">
+          <Kbd activated={title() === 'Home'}>Home</Kbd>
+          <Kbd activated={title() === 'About'}>About</Kbd>
+          <Kbd activated={title() === 'Awesome'}>Awesome</Kbd>
+          <button onClick={_cycle}>Toggle</button>
+        </div>
+      </div>
+    </ExampleBase>
+  );
+}

dev/pages/index/+Page.tsx

@@ -9,6 +9,7 @@ import { UseDebouncedCallbackExample } from 'dev/components/examples/use-debounc
 import { UseDebouncedSignalExample } from 'dev/components/examples/use-debounced-signal/use-debounced-signal.example';
 import { UseDebouncedValueExample } from 'dev/components/examples/use-debounced-value/use-debounced-value.example';
 import { UseDidUpdateExample } from 'dev/components/examples/use-did-update/use-did-update.example';
+import { UseDocumentTitleExample } from 'dev/components/examples/use-document-title/use-document-title.example';
 import { UseDocumentVisibilityExample } from 'dev/components/examples/use-document-visibility/use-document-visibility.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';
@@ -173,6 +174,10 @@ export default function HomePage() {
       title: 'useColorScheme',
       example: <UseColorSchemeExample />,
     },
+    {
+      title: 'useDocumentTitle',
+      example: <UseDocumentTitleExample />,
+    },
   ];
 
   const filteredList = createMemo(() => {

src/index.ts

@@ -6,6 +6,7 @@ export * from './use-debounced-callback/use-debounced-callback';
 export * from './use-debounced-signal/use-debounced-signal';
 export * from './use-debounced-value/use-debounced-value';
 export * from './use-did-update/use-did-update';
+export * from './use-document-title/use-document-title';
 export * from './use-document-visibility/use-document-visibility';
 export * from './use-eye-dropper/use-eye-dropper';
 export * from './use-favicon/use-favicon';

src/use-document-title/use-document-title.ts

@@ -0,0 +1,19 @@
+import { Accessor, createEffect, createSignal } from 'solid-js';
+
+/** Improvement: document.title is an optional signal. Now returns a setter if you want to set it manually. */
+export function useDocumentTitle(title?: Accessor<string>) {
+  const [_title, _setTitle] = createSignal(title?.());
+
+  function setTitle(newTitle: string) {
+    if (typeof newTitle === 'string' && newTitle.trim().length > 0) {
+      document.title = newTitle.trim();
+      _setTitle(newTitle);
+    }
+  }
+
+  createEffect(() => {
+    if (title) setTitle(title());
+  });
+
+  return [_title, setTitle] as const;
+}