@ribbon-studios/react-utils - npm Package Compare versions

Comparing version 4.1.1 to 4.2.0

dist/hooks/__tests__/use-theme.spec.d.ts

+export {};

dist/hooks/use-theme.d.ts

+export declare function createThemeHook<T extends string[]>(options: createThemeHook.Options<T>): {
+    (): readonly ["auto" | T[number], import('react').Dispatch<import('react').SetStateAction<"auto" | T[number]>>, T[number]];
+    $modes: readonly [...T, "auto"];
+};
+export declare namespace createThemeHook {
+    type Options<T extends string[]> = {
+        /**
+         * A list of the available themes.
+         */
+        themes: T;
+        /**
+         * This theme will be used when light mode is detected.
+         */
+        light: T[number];
+        /**
+         * This theme will be used when dark mode is detected.
+         */
+        dark: T[number];
+    };
+    function getTheme<T extends string[]>(mode: T[number] | 'auto', options: Options<T>): T[number];
+}

package.json

 {
   "name": "@ribbon-studios/react-utils",
   "description": "Collection of react utilities curated by the Ribbon Studios Team~",
-  "version": "4.1.1",
+  "version": "4.2.0",
   "type": "module",
@@ -6,0 +6,0 @@ "source": "src/*.ts",

README.md

@@ -21,2 +21,3 @@ [![NPM Version][npm-version-image]][npm-url]
   - [`useSessionStorage`](#usesessionstorage)
+  - [`useTheme`](#usetheme)
 - [React Router](#react-router)
@@ -88,2 +89,50 @@ - [`useLoaderData`](#useloaderdata)
 
+### `createThemeHook`
+
+Creates a hook that automatically updates the `data-theme` attribute on the body to the active theme.
+
+```tsx
+// use-theme.ts
+import { createThemeHook } from '@ribbon-studios/react-utils';
+
+export const useTheme = createThemeHook({
+  // Ensure you use `as const` or the types won't be correct!
+  themes: ['light', 'dark'] as const,
+
+  // This is the theme that will be used when light mode is preferred
+  light: 'light',
+
+  // This is the theme that will be used when dark mode is preferred
+  dark: 'dark',
+});
+
+type Modes = typeof useTheme.$modes;
+
+// Navigation.tsx
+const THEME_LABELS: Record<Modes, string> = {
+  auto: 'Auto',
+  light: 'Light',
+  dark: 'Dark',
+};
+
+const NEXT_THEME: Record<Modes, Modes> = {
+  auto: 'light',
+  light: 'dark',
+  dark: 'auto',
+};
+
+export function Navigation() {
+  const [mode, setMode] = useTheme();
+  const nextTheme = useCallback(() => {
+    setMode((mode) => NEXT_THEME[mode]);
+  }, [setMode]);
+
+  return (
+    <div>
+      <button onClick={nextTheme}>{THEME_LABELS[mode]}</button>
+    </div>
+  );
+}
+```
+
 ## React Router
@@ -90,0 +139,0 @@

New alerts

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Fixed alerts

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

55476

3.5%

Number of package files

48

4.35%

Lines of code

1045

2.15%

Number of lines in readme file

273

21.88%

No dependency changes