From bc59f8c39a6fcb7a2cc78edc691e36a2a05299ad Mon Sep 17 00:00:00 2001
From: SukkaW <isukkaw@gmail.com>
Date: Sun, 27 Oct 2024 03:36:10 +0800
Subject: [PATCH] release: 0.2.40

---
 CHANGELOG.md | 59 ++++++++++++++++++++++++++++++++++++++++++++++++++++
 package.json |  2 +-
 2 files changed, 60 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index b5de009b..958fc5a5 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,62 @@
+# 0.2.40
+
+**Core Changes**
+
+- Add `createLocalStorageState` and `createSessionStorageState`. Example usage:
+
+```tsx
+// src/context/sidebar-active.tsx
+import { createLocalStorageState } from 'foxact/create-local-storage-state';
+
+const [useSidebarActive, useSidebarActiveValue] = createLocalStorageState(
+  'sidebar-active', // The localStorage key
+  /**
+   * The initial value to use if there is no item in the local storage with the provided key,
+   * the undefined value will be used if no initial value is provided.
+   *
+   * Also, the initial value will also be used during the server-side rendering, see below.
+   */
+  false,
+  /**
+   * Optional configuration object enables the customization of value serialization before it's stored in local storage.
+   */
+  {
+    // Optional, default to false. When set to "true", the value will be passed to the localStorage API as is.
+    raw: false,
+    // Optional, default to "JSON.stringify". Can only be specified when the "raw" is set to false (which is the default).
+    serializer: JSON.stringify,
+    // Optional, default to "JSON.parse". Can only be specified when the "raw" is set to false (which is the default).
+    deserializer: JSON.parse,
+  }
+);
+
+export { useSidebarActive, useSidebarActiveValue };
+```
+
+And now you can use the getter and setter hooks anywhere in your app:
+
+```tsx
+// src/components/sidebar.tsx
+import { memo } from 'react';
+import { useSidebarActive, useSidebarActiveValue } from '../context/sidebar-active';
+
+function Sidebar() {
+  const [sidebarActive, setSidebarActive] = useSidebarActive();
+  // If you only need the value, you can use `useSidebarActiveValue` instead:
+  const sidebarActive = useSidebarActiveValue();
+
+  return (
+    <div className={`sidebar ${sidebarActive ? 'active' : ''}`}>
+      <button onClick={() => setSidebarActive(false)}>Close Sidebar</button>
+    </div>
+  );
+}
+
+export default memo(Sidebar);
+```
+
+See the documentation for more information.
+
 # 0.2.39
 
 **Core Changes**
diff --git a/package.json b/package.json
index b5e41abd..55340f77 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "foxact",
-  "version": "0.2.39",
+  "version": "0.2.40",
   "private": true,
   "description": "React Hooks/Utils done right. For browser, SSR, and React Server Components.",
   "homepage": "https://foxact.skk.moe",