{
- if (el) ref.current[0] = el;
+ if (el && ref.current) ref.current[0] = el;
}} style={{marginTop: "200vh", backgroundColor: "red"}}>
Hello, world!
{
- if (el) ref.current[1] = el;
+ if (el && ref.current) ref.current[1] = el;
}} style={{marginTop: "20vh", marginBottom: "200vh", backgroundColor: "yellow"}}>
Hello, world!
@@ -33,4 +35,4 @@ const DemoUseIntersectionObserverArray = () => {
);
};
-export default DemoUseIntersectionObserverArray;
+export default Page;
diff --git a/examples/components/demoUseLazyLoad.tsx b/examples/app/demoUseLazyLoad/page.tsx
similarity index 87%
rename from examples/components/demoUseLazyLoad.tsx
rename to examples/app/demoUseLazyLoad/page.tsx
index 89efaad..b8bf61d 100644
--- a/examples/components/demoUseLazyLoad.tsx
+++ b/examples/app/demoUseLazyLoad/page.tsx
@@ -1,7 +1,9 @@
+"use client";
+
import React, {ReactNode} from 'react';
-import useLazyLoad from "../../src/hooks/useLazyLoad";
+import {useLazyLoad} from "@/../src";
-const DemoUseLazyLoad = () => {
+const Page = () => {
const { loadMore, elements, reachedEnd, isFetching, clear } = useLazyLoad(35, async (performedFetches) => {
const data = await fetch(`https://api.artic.edu/api/v1/artworks?page=${performedFetches + 1}&limit=10`);
const parsedData = await data.json();
@@ -21,4 +23,4 @@ const DemoUseLazyLoad = () => {
);
};
-export default DemoUseLazyLoad;
+export default Page;
diff --git a/examples/components/demoUseLocalStorage.tsx b/examples/app/demoUseLocalStorage/page.tsx
similarity index 65%
rename from examples/components/demoUseLocalStorage.tsx
rename to examples/app/demoUseLocalStorage/page.tsx
index a721ee2..53daeac 100644
--- a/examples/components/demoUseLocalStorage.tsx
+++ b/examples/app/demoUseLocalStorage/page.tsx
@@ -1,12 +1,18 @@
+"use client";
+
import React from "react";
-import { useLocalStorage } from "../../src";
+import { useLocalStorage } from "@/../src";
function ComponentOne() {
- const [value, setValue] = useLocalStorage("value", { propagateChanges: true, listenForChanges: true });
+ const [value, setValue] = useLocalStorage("value", {
+ propagateChanges: true,
+ listenForChanges: true
+ });
+
return (
{value}
-
setValue("Duck")}>Set value to "Duck"
+
setValue("Duck")}>Set value to "Duck"
);
}
@@ -16,14 +22,16 @@ function ComponentTwo() {
return (
{value}
-
setValue("Bear")}>Set value to "Bear"
+
setValue("Bear")}>Set value to "Bear"
);
}
-function DemoUseLocalStorage() {
- const [value, setValue] = useLocalStorage("value", { propagateChanges: true, listenForChanges: true });
-
+function Page() {
+ const [value, setValue] = useLocalStorage("value", {
+ propagateChanges: true,
+ listenForChanges: true,
+ });
return (
<>
- I change my color. I'm a chameleon.
+ I change my color. I'm a chameleon.
);
};
-export default DemoUsePreferredScheme;
+export default Page;
diff --git a/examples/components/demoUseToggle.tsx b/examples/app/demoUseToggle/page.tsx
similarity index 71%
rename from examples/components/demoUseToggle.tsx
rename to examples/app/demoUseToggle/page.tsx
index a0e462e..f00ff0b 100644
--- a/examples/components/demoUseToggle.tsx
+++ b/examples/app/demoUseToggle/page.tsx
@@ -1,7 +1,9 @@
+"use client";
+
import React from 'react';
-import useToggle from "../../src/hooks/useToggle";
+import {useToggle} from "@/../src";
-const DemoUseToggle = () => {
+const Page = () => {
const [state, toggle] = useToggle();
return (
<>
@@ -13,4 +15,4 @@ const DemoUseToggle = () => {
);
};
-export default DemoUseToggle;
+export default Page;
diff --git a/examples/app/layout.tsx b/examples/app/layout.tsx
new file mode 100644
index 0000000..a618776
--- /dev/null
+++ b/examples/app/layout.tsx
@@ -0,0 +1,18 @@
+export const metadata = {
+ title: 'Next.js',
+ description: 'Generated by Next.js',
+}
+
+export default function RootLayout({
+ children,
+}: {
+ children: React.ReactNode
+}) {
+ return (
+
+
+ {children}
+
+
+ )
+}
diff --git a/examples/index.html b/examples/index.html
deleted file mode 100644
index 9a0a94f..0000000
--- a/examples/index.html
+++ /dev/null
@@ -1,11 +0,0 @@
-
-
-
- Anzol
-
-
-
-
-
diff --git a/examples/index.tsx b/examples/index.tsx
deleted file mode 100644
index 15b08c3..0000000
--- a/examples/index.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import React from 'react';
-import App from './App';
-import { createRoot } from 'react-dom/client';
-
-// @ts-ignore
-const root = createRoot(document.getElementById("root"));
-root.render((() => {
+ if (SSR || typeof localStorage === "undefined") return null;
+ return (persistStateInLocalStorage
+ ? localStorage.getItem("anzol-dark-mode-hook")
+ ?? defaultTheme
+ ?? preferredScheme
+ : defaultTheme
+ ?? preferredScheme
+ ) as "light" | "dark";
+ });
+
+ useEffect(() => {
+ if (SSR) {
+ setTheme(((persistStateInLocalStorage
+ ? localStorage.getItem("anzol-dark-mode-hook") ?? defaultTheme ?? preferredScheme
+ : defaultTheme ?? preferredScheme) as "light" | "dark"));
+ }
+ }, []);
useEffect(() => {
- if (typeof window === "undefined") return;
if (updateOnPreferredSchemeChange) {
const matchPreferredScheme = (e: MediaQueryListEvent) => setTheme(e.matches ? "dark" : "light");
window
@@ -65,14 +88,16 @@ function useDarkMode({
}
}, [updateOnPreferredSchemeChange, preferredScheme]);
- useEffect(() => {
- if (typeof window === "undefined") return;
- if (persistStateInLocalStorage) localStorage.setItem("anzol-dark-mode-hook", theme);
- }, [theme]);
-
return {
- setTheme: (selectedTheme: "light" | "dark") => setTheme(selectedTheme),
- toggleTheme: () => setTheme(prevState => prevState === "light" ? "dark" : "light"),
+ setTheme: (selectedTheme: "light" | "dark") => {
+ setTheme(selectedTheme);
+ if (persistStateInLocalStorage) localStorage.setItem("anzol-dark-mode-hook", selectedTheme);
+ },
+ toggleTheme: () => setTheme(prevState => {
+ const nextState = prevState === "light" ? "dark" : "light";
+ if (persistStateInLocalStorage) localStorage.setItem("anzol-dark-mode-hook", nextState);
+ return nextState;
+ }),
theme,
};
}
diff --git a/src/hooks/useIntersectionObserver.ts b/src/hooks/useIntersectionObserver.ts
index 56b0a86..6ad77ba 100644
--- a/src/hooks/useIntersectionObserver.ts
+++ b/src/hooks/useIntersectionObserver.ts
@@ -45,7 +45,6 @@ function useIntersectionObserver({
const ref = useRef(null);
const [entry, setEntry] = useState(null);
useEffect(() => {
- if (typeof IntersectionObserver === "undefined") return;
if (ref.current) {
const observer = new IntersectionObserver(
(e) => setEntry(e[0]),
diff --git a/src/hooks/useIntersectionObserverArray.ts b/src/hooks/useIntersectionObserverArray.ts
index d275337..c22403b 100644
--- a/src/hooks/useIntersectionObserverArray.ts
+++ b/src/hooks/useIntersectionObserverArray.ts
@@ -58,7 +58,6 @@ function useIntersectionObserverArray({
const ref = useRef([]);
const [entries, setEntries] = useState<(IntersectionObserverEntry | null)[]>([]);
useEffect(() => {
- if (typeof IntersectionObserver === "undefined") return;
if (ref.current) {
const observer = new IntersectionObserver(
(e) => {
diff --git a/src/hooks/useLocalStorage.ts b/src/hooks/useLocalStorage.ts
index d0f57ab..ae29e3f 100644
--- a/src/hooks/useLocalStorage.ts
+++ b/src/hooks/useLocalStorage.ts
@@ -11,6 +11,13 @@ export interface LocalStorageOptions {
/** If this parameter is true, the hook listens for changes of the specified {@link key} and
updates its state accordingly. */
listenForChanges?: boolean,
+ /** This parameter which is true by default determines if the hook should take the necessary steps to avoid
+ * hydration errors when using SSR. This results in the initial state being null on the first render even if there
+ * is a value in local storage. On consecutive renders the correct value will be returned. Note that components
+ * with "use client" in Next.js are still pre-rendered on the server. Only set this variable to false, if you are
+ * rendering on the client only. What this will do, it will return the correct value from local storage on the first
+ * render. This can lead to hydration errors when using SSR because local storage doesn't exist on the server. */
+ SSR?: boolean
}
/**
@@ -23,7 +30,7 @@ export interface LocalStorageOptions {
*
* @example
* ```tsx
- * function DemoUseLocalStorage() {
+ * function Page() {
* const [value, setValue] = useLocalStorage("value");
* return >] {
- const [value, setValue] = useState(null);
+ const [value, setValue] = useState(() => {
+ if (SSR || typeof localStorage === "undefined") return null;
+ const storedValue = localStorage.getItem(key);
+ if (storedValue) return storedValue;
+ const init = initialValue || null;
+ if (init) localStorage.setItem(key, init);
+ return init;
+ });
const [blockUpdates, setBlockUpdates] = useState(true);
const id = useId();
useEffect(() => {
- if (typeof window === "undefined") return;
- setValue(() => {
- const storedValue = localStorage.getItem(key);
- if (storedValue) return storedValue;
- const init = initialValue || null;
- if (init) localStorage.setItem(key, init);
- return init;
- });
+ if (SSR) {
+ setValue(() => {
+ const storedValue = localStorage.getItem(key);
+ if (storedValue) return storedValue;
+ const init = initialValue || null;
+ if (init !== null) localStorage.setItem(key, init);
+ return init;
+ });
+ }
}, [key, initialValue]);
useEffect(() => {
- if (typeof window === "undefined") return;
if (!blockUpdates) {
if (value === null)
localStorage.removeItem(key);
@@ -68,7 +83,6 @@ function useLocalStorage(key: string, {
}, [value]);
useEffect(() => {
- if (typeof window === "undefined") return;
setValue(localStorage.getItem(key) || initialValue || null);
if (listenForChanges) {
const handleStorageChange = (event: CustomEvent) => {
diff --git a/src/hooks/usePreferredScheme.ts b/src/hooks/usePreferredScheme.ts
index 90e7d5d..10371c1 100644
--- a/src/hooks/usePreferredScheme.ts
+++ b/src/hooks/usePreferredScheme.ts
@@ -1,8 +1,14 @@
import { useEffect, useState } from "react";
/**
+ * @param SSR - This parameter which is true by default determines if the hook should take the necessary steps to avoid
+ * hydration errors when using SSR. This results in the initial state being null on the first render even if there
+ * is a value in local storage. On consecutive renders the correct value will be returned. Note that components
+ * with "use client" in Next.js are still pre-rendered on the server. Only set this variable to false, if you are
+ * rendering on the client only. What this will do, it will return the correct value from local storage on the first
+ * render. This can lead to hydration errors when using SSR because local storage doesn't exist on the server.
* @return The user's preferred scheme. Either light or dark. This value can change if the user changes their preferred
- * scheme.
+ * scheme. Is only null on the first render when using {@link SSR}.
* @example
* ```tsx
* const DemoUsePreferredScheme = () => {
@@ -18,14 +24,23 @@ import { useEffect, useState } from "react";
* };
* ```
*/
-function usePreferredScheme(): "light" | "dark" {
- const [theme, setTheme] = useState<"light" | "dark">(typeof window === "undefined" ? "light" :
- window.matchMedia("(prefers-color-scheme: dark)").matches
+function usePreferredScheme(SSR= true): "light" | "dark" | null {
+ const [theme, setTheme] = useState<"light" | "dark" | null>(() => {
+ if (SSR || typeof window === "undefined") return null;
+ return window.matchMedia("(prefers-color-scheme: dark)").matches
? "dark"
- : "light",
- );
+ : "light";
+ });
+
+ useEffect(() => {
+ if (SSR) {
+ setTheme(window.matchMedia("(prefers-color-scheme: dark)").matches
+ ? "dark"
+ : "light");
+ }
+ }, []);
+
useEffect(() => {
- if (typeof window === "undefined") return;
const matchPreferredScheme = (e: MediaQueryListEvent) => setTheme(e.matches ? "dark" : "light");
window
.matchMedia("(prefers-color-scheme: dark)")
diff --git a/tests/useDarkMode.test.ts b/tests/useDarkMode.test.ts
index bef58b7..1a68161 100644
--- a/tests/useDarkMode.test.ts
+++ b/tests/useDarkMode.test.ts
@@ -25,7 +25,7 @@ describe("useDarkMode", () => {
test("should use the current preferred scheme (light) by default", async () => {
defineMock(false);
const { result } = await act(async () => {
- return renderHook(() => useDarkMode());
+ return renderHook(() => useDarkMode({ SSR: false }));
});
expect(result.current.theme).toBe("light");
});
@@ -33,7 +33,7 @@ describe("useDarkMode", () => {
test("should use the current preferred scheme (dark) by default", async () => {
defineMock(true);
const { result } = await act(async () => {
- return renderHook(() => useDarkMode());
+ return renderHook(() => useDarkMode({ SSR: false }));
});
expect(result.current.theme).toBe("dark");
});
@@ -51,7 +51,10 @@ describe("useDarkMode", () => {
localStorage.setItem("anzol-dark-mode-hook", "light");
defineMock(true);
const { result } = await act(async () => {
- return renderHook(() => useDarkMode({ persistStateInLocalStorage: false }));
+ return renderHook(() => useDarkMode({
+ persistStateInLocalStorage: false,
+ SSR: false,
+ }));
});
expect(result.current.theme).toBe("dark");
});
@@ -77,7 +80,7 @@ describe("useDarkMode", () => {
test("should update its state when the preferred scheme changes", async () => {
defineMock(false);
const { result } = await act(async () => {
- return renderHook(() => useDarkMode());
+ return renderHook(() => useDarkMode({ SSR: false }));
});
expect(result.current.theme).toBe("light");
act(() => triggerChange({ matches: true }));
@@ -89,7 +92,10 @@ describe("useDarkMode", () => {
test("should not update its state when the preferred scheme changes if configured to do so", async () => {
defineMock(false);
const { result } = await act(async () => {
- return renderHook(() => useDarkMode({ updateOnPreferredSchemeChange: false }));
+ return renderHook(() => useDarkMode({
+ updateOnPreferredSchemeChange: false,
+ SSR: false,
+ }));
});
expect(result.current.theme).toBe("light");
act(() => triggerChange({ matches: true }));
@@ -101,7 +107,10 @@ describe("useDarkMode", () => {
test("should allow setting the theme", async () => {
defineMock(false);
const { result } = await act(async () => {
- return renderHook(() => useDarkMode({ updateOnPreferredSchemeChange: false }));
+ return renderHook(() => useDarkMode({
+ updateOnPreferredSchemeChange: false,
+ SSR: false,
+ }));
});
expect(result.current.theme).toBe("light");
for (let i = 0; i < 2; i++) {
@@ -117,7 +126,10 @@ describe("useDarkMode", () => {
test("should allow toggling the theme", async () => {
defineMock(false);
const { result } = await act(async () => {
- return renderHook(() => useDarkMode({ updateOnPreferredSchemeChange: false }));
+ return renderHook(() => useDarkMode({
+ updateOnPreferredSchemeChange: false,
+ SSR: false,
+ }));
});
expect(result.current.theme).toBe("light");
for (let i = 0; i < 5; i++) {
@@ -125,4 +137,46 @@ describe("useDarkMode", () => {
expect(result.current.theme).toBe(i % 2 === 0 ? "dark" : "light");
}
});
+
+ test("should support SSR", async () => {
+ defineMock(false);
+ const { result } = await act(async () => {
+ return renderHook(() => useDarkMode({
+ updateOnPreferredSchemeChange: true,
+ }));
+ });
+ expect(result.current.theme).toBe(null);
+ act(() => triggerChange({ matches: true }));
+ expect(result.current.theme).toBe("dark");
+ act(() => triggerChange({ matches: false }));
+ expect(result.current.theme).toBe("light");
+ });
+
+ test("should support SSR without listening to preferred scheme changes", async () => {
+ defineMock(false);
+ const { result } = await act(async () => {
+ return renderHook(() => useDarkMode({
+ updateOnPreferredSchemeChange: false,
+ }));
+ });
+ expect(result.current.theme).toBe(null);
+ act(() => triggerChange({ matches: true }));
+ expect(result.current.theme).toBe(null);
+ act(() => triggerChange({ matches: false }));
+ expect(result.current.theme).toBe(null);
+ });
+
+ test("should support SSR even without using local storage", async () => {
+ defineMock(false);
+ const { result } = await act(async () => {
+ return renderHook(() => useDarkMode({
+ persistStateInLocalStorage: false,
+ }));
+ });
+ expect(result.current.theme).toBe(null);
+ act(() => triggerChange({ matches: true }));
+ expect(result.current.theme).toBe("dark");
+ act(() => triggerChange({ matches: false }));
+ expect(result.current.theme).toBe("light");
+ });
});
\ No newline at end of file
diff --git a/tests/useLocalStorage.test.ts b/tests/useLocalStorage.test.ts
index 9bf1115..36b62a6 100644
--- a/tests/useLocalStorage.test.ts
+++ b/tests/useLocalStorage.test.ts
@@ -24,6 +24,33 @@ async function renderUseLocalStorage({
describe("useLocalStorage", () => {
+ const localStorageMock = (() => {
+ let store: Record = {};
+
+ return {
+ getItem: (key: string) => store[key] || null,
+ setItem: (key: string, value: string) => {
+ store[key] = value;
+ },
+ removeItem: (key: string) => {
+ // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
+ delete store[key];
+ },
+ clear: () => {
+ store = {};
+ },
+ };
+ })();
+
+ // Mock the global window localStorage object
+ beforeEach(() => {
+ Object.defineProperty(window, "localStorage", {
+ value: localStorageMock,
+ writable: true,
+ });
+ localStorage.clear();
+ });
+
afterEach(() => {
localStorage.clear();
});
@@ -116,4 +143,46 @@ describe("useLocalStorage", () => {
act(() => result2.current[1]("Unicorn"));
expect(setItemSpy).toHaveBeenCalledTimes(2);
});
+
+ test("should support SSG", async () => {
+ const { result } = await renderUseLocalStorage({
+ initialKey: "animal", initialOptions: { initialValue: "Bear", SSR: false },
+ });
+ expect(result.current[0]).toBe("Bear");
+ expect(window.localStorage.getItem("animal")).toBe("Bear");
+ });
+
+ test("should support SSG without an initial value and existing local storage key", async () => {
+ const { result } = await renderUseLocalStorage({
+ initialKey: "animal", initialOptions: { SSR: false },
+ });
+ expect(result.current[0]).toBe(null);
+ expect(window.localStorage.getItem("animal")).toBe(null);
+ });
+
+ test("should support SSG with an initial value and existing local storage key", async () => {
+ const { result } = await renderUseLocalStorage({
+ initialKey: "animal", initialOptions: { SSR: false, initialValue: "Bear" },
+ });
+ expect(result.current[0]).toBe("Bear");
+ expect(window.localStorage.getItem("animal")).toBe("Bear");
+ });
+
+ test("should support SSG without an initial value but with an existing local storage key", async () => {
+ localStorage.setItem("animal", "Bear");
+ const { result } = await renderUseLocalStorage({
+ initialKey: "animal", initialOptions: { SSR: false },
+ });
+ expect(result.current[0]).toBe("Bear");
+ expect(window.localStorage.getItem("animal")).toBe("Bear");
+ });
+
+ test("should support SSG with an initial value but with an existing local storage key", async () => {
+ localStorage.setItem("animal", "Giraffe");
+ const { result } = await renderUseLocalStorage({
+ initialKey: "animal", initialOptions: { SSR: false, initialValue: "Bear" },
+ });
+ expect(result.current[0]).toBe("Giraffe");
+ expect(window.localStorage.getItem("animal")).toBe("Giraffe");
+ });
});
diff --git a/webpack.config.js b/webpack.config.js
deleted file mode 100644
index 3f8bab8..0000000
--- a/webpack.config.js
+++ /dev/null
@@ -1,35 +0,0 @@
-const path = require('path');
-const HtmlWebpackPlugin = require('html-webpack-plugin');
-
-module.exports = {
- mode: "development",
- entry: './examples/index.tsx',
- output: {
- path: path.resolve(__dirname, 'dist'),
- filename: 'bundle.js',
- },
- resolve: {
- extensions: ['.ts', '.tsx', '.js'],
- },
- module: {
- rules: [
- {
- test: /\.tsx?$/,
- use: 'babel-loader',
- exclude: /node_modules/,
- },
- ],
- },
- plugins: [
- new HtmlWebpackPlugin({
- template: './examples/index.html',
- }),
- ],
- devServer: {
- static: {
- directory: path.join(__dirname, 'dist'),
- },
- compress: true,
- port: 3000,
- },
-};