docs(sponsor): conversion-focused sponsors section in README + full tier pages (en/zh-Hans/zh-Hant)

README.md

@@ -15,6 +15,7 @@
   <img alt="UnLicense" src="https://img.shields.io/npm/l/@reactuses/core?style=for-the-badge&labelColor=24292e">
   <img alt="Tree Shaking Friendly" src="https://img.shields.io/badge/Tree%20Shaking-Friendly-brightgreen?style=for-the-badge&labelColor=24292e">
   <img alt="TypeScript Support" src="https://img.shields.io/badge/TypeScript-Support-blue?style=for-the-badge&labelColor=24292e">
+  <a href="https://github.com/sponsors/childrentime"><img alt="Sponsor ReactUse" src="https://img.shields.io/badge/%E2%9D%A4-Sponsor-db61a2?style=for-the-badge&labelColor=24292e"></a>
 </p>
 
 <p align="center">
@@ -24,6 +25,28 @@
   <a href="https://glama.ai/mcp/servers/childrentime/reactuse"><img alt="ReactUse MCP server on Glama" src="https://glama.ai/mcp/servers/childrentime/reactuse/badges/score.svg"></a>
 </p>
 
+## Sponsors
+
+Sponsoring ReactUse puts your product in front of the React developers who install `@reactuses/core` every month — your logo right here at the top of the README, and on [reactuse.com/sponsor](https://reactuse.com/sponsor/). Live reach:
+
+<p align="center">
+  <a href="https://www.npmjs.com/package/@reactuses/core"><img alt="npm installs per month" src="https://img.shields.io/npm/dm/@reactuses/core?style=for-the-badge&labelColor=24292e&color=50a36f&label=npm%20installs%2Fmonth"></a>
+  <a href="https://github.com/childrentime/reactuse/stargazers"><img alt="GitHub stars" src="https://img.shields.io/github/stars/childrentime/reactuse?style=for-the-badge&labelColor=24292e&color=70a5fd&label=github%20stars"></a>
+</p>
+
+<p align="center">
+  <a href="https://github.com/sponsors/childrentime"><img alt="Gold Sponsor — this spot is open" src="https://img.shields.io/badge/%F0%9F%A5%87%20Gold-your%20logo%20here-FFD700?style=for-the-badge&labelColor=24292e"></a>
+  <a href="https://github.com/sponsors/childrentime"><img alt="Silver Sponsor — this spot is open" src="https://img.shields.io/badge/%F0%9F%A5%88%20Silver-your%20logo%20here-C0C0C0?style=for-the-badge&labelColor=24292e"></a>
+  <a href="https://github.com/sponsors/childrentime"><img alt="Bronze Sponsor — this spot is open" src="https://img.shields.io/badge/%F0%9F%A5%89%20Bronze-your%20logo%20here-CD7F32?style=for-the-badge&labelColor=24292e"></a>
+</p>
+
+<p align="center">
+  <a href="https://github.com/sponsors/childrentime"><img alt="Sponsor on GitHub" src="https://img.shields.io/badge/%E2%9D%A4%20Sponsor%20on%20GitHub-db61a2?style=for-the-badge&labelColor=24292e"></a>
+  <a href="https://www.buymeacoffee.com/lianwenwu"><img alt="Buy me a coffee" src="https://img.shields.io/badge/%E2%98%95%20Buy%20me%20a%20coffee-FFDD00?style=for-the-badge&labelColor=24292e"></a>
+</p>
+
+<p align="center"><sub>All sponsor slots are currently open — <a href="https://github.com/sponsors/childrentime">claim one</a> and your logo goes live within 48 hours. Tiers, benefits and company invoicing: <a href="https://reactuse.com/sponsor/">reactuse.com/sponsor</a>.</sub></p>
+
 ## Introduction
 
 **ReactUse** is a comprehensive collection of **100+ essential React Hooks** for building modern React applications. Inspired by [VueUse](https://vueuse.org/), it provides production-ready hooks for browser APIs, state management, sensors, animations, DOM elements, and more.
@@ -138,8 +161,6 @@ This project is heavily inspired by the following awesome projects.
 
 ---
 
-## Sponsor Me
-
-If my work has helped you, consider buying me a cup of coffee. Thank you very much🥰!.
+## Support ReactUse
 
-[Buy me a coffee](https://www.buymeacoffee.com/lianwenwu)
+ReactUse is free and MIT-licensed, maintained in spare time. If it saved you a day of work, consider [becoming a sponsor](https://github.com/sponsors/childrentime) (from $5/month) or [buying me a coffee](https://www.buymeacoffee.com/lianwenwu) — it keeps the hooks maintained and the docs interactive. 🥰

packages/website-astro/public/llms-full.txt

@@ -228,14 +228,13 @@ React hook that facilitates the storage, updating and deletion of values within
 ### Notes
 
 - **SSR considerations**: Pass a `defaultValue` when using SSR so the hook has a value before `document.cookie` is available on the client.
-- **No cross-component sync**: Updating a cookie in one component does not automatically trigger re-renders in other components using the same key. Use a broadcast mechanism if needed.
-- See also `useLocalStorage` and `useSessionStorage` for Web Storage alternatives that provide cross-tab synchronization via the `storage` event.
+- **Same-tab sync**: Updating a cookie in one component automatically re-renders sibling `useCookie` instances using the same key in the same tab. Cookies fire no native cross-tab event, so this does **not** propagate across tabs (unlike `useLocalStorage`/`useSessionStorage`).
+- **`refreshCookie`**: Only needed to pick up changes made *outside* the hook — a server `Set-Cookie`, a direct `document.cookie` write, or the CookieStore API. Sibling hook instances no longer need it.
 
 :::note
-When you use setCookieValue with useCookie hook that shares the same key across multiple components,
-it does not trigger an update in the other components using this hook.
-
- If you want a broadcast effect, you can refer to the following https://github.com/childrentime/reactuse/issues/91
+`useCookie` instances that share the same key stay in sync within the same tab:
+calling `updateCookie` in one component re-renders the others automatically. (Earlier
+versions did not — a manual broadcast was required; that is no longer necessary.)
 :::
 
 ## Usage
@@ -286,6 +285,46 @@ function Demo() {
 
 ```
 
+## Same-tab sync
+
+Two components using the same cookie key stay in sync within the tab — click a button in either panel and the other updates immediately, no manual broadcast and no reload:
+
+```tsx live noInline
+function CookiePanel({ label }) {
+  const [value, updateCookie] = useCookie("shared-demo-cookie", { path: "/" }, "A");
+  return (
+    <div
+      style={{
+        border: "1px solid var(--sl-color-gray-5, #ccc)",
+        borderRadius: 6,
+        padding: 12,
+        marginBottom: 8,
+      }}
+    >
+      <strong>{label}</strong> reads: <code>{value ?? "(empty)"}</code>
+      <div style={{ display: "flex", gap: 8, marginTop: 8 }}>
+        <button onClick={() => updateCookie("A")}>Set A</button>
+        <button onClick={() => updateCookie("B")}>Set B</button>
+        <button onClick={() => updateCookie("C")}>Set C</button>
+        <button onClick={() => updateCookie(undefined)}>Clear</button>
+      </div>
+    </div>
+  );
+}
+
+function Demo() {
+  return (
+    <div>
+      <p>Click a button in either panel — the other updates in the same tab:</p>
+      <CookiePanel label="Component A" />
+      <CookiePanel label="Component B" />
+    </div>
+  );
+}
+
+render(<Demo />);
+```
+
 ---
 
 ## useCountDown
@@ -714,7 +753,7 @@ React side-effect hook that manages a single `localStorage` key
 ### Notes
 
 - **Persistence**: Data survives page reloads and browser restarts. Use `useSessionStorage` if you only need data for the current session.
-- **Cross-tab sync**: By default, the hook listens for `storage` events so changes in one tab update other tabs. Disable this with `listenToStorageChanges: false`.
+- **Cross-tab & same-tab sync**: Every component bound to the same key stays in sync — within the current tab (always on, no reload) and across other tabs (via the `storage` event). `listenToStorageChanges: false` disables only the cross-tab listener; same-tab sync stays active.
 - **Custom serialization**: For objects or non-string values, provide `serializer.read` and `serializer.write` functions in the options. The default behavior uses JSON serialization for objects and raw strings for string values.
 - See also `useSessionStorage` for session-scoped storage and `useCookie` for cookie-based persistence.
 
@@ -772,6 +811,45 @@ function Demo() {
 
 ```
 
+## Same-tab sync
+
+Two components bound to the same key stay in sync within the tab — not just across tabs. Click a button in one panel and the other updates immediately, no reload:
+
+```tsx live noInline
+function StoragePanel({ label }) {
+  const [value, setValue] = useLocalStorage("shared-demo-key", "A");
+  return (
+    <div
+      style={{
+        border: "1px solid var(--sl-color-gray-5, #ccc)",
+        borderRadius: 6,
+        padding: 12,
+        marginBottom: 8,
+      }}
+    >
+      <strong>{label}</strong> reads: <code>{String(value ?? "(empty)")}</code>
+      <div style={{ display: "flex", gap: 8, marginTop: 8 }}>
+        <button onClick={() => setValue("A")}>Set A</button>
+        <button onClick={() => setValue("B")}>Set B</button>
+        <button onClick={() => setValue(null)}>Clear</button>
+      </div>
+    </div>
+  );
+}
+
+function Demo() {
+  return (
+    <div>
+      <p>Click a button in one panel — the other updates in the same tab:</p>
+      <StoragePanel label="Component A" />
+      <StoragePanel label="Component B" />
+    </div>
+  );
+}
+
+render(<Demo />);
+```
+
 ---
 
 ## useMap
@@ -1119,7 +1197,7 @@ React side-effect hook that manages a single `sessionStorage` key
 ### Notes
 
 - **Session-scoped**: Unlike `localStorage`, data in `sessionStorage` is cleared when the tab or browser is closed. Use `useLocalStorage` for long-lived persistence.
-- **Cross-tab sync**: The hook listens for `storage` events by default. Disable with `listenToStorageChanges: false`.
+- **Same-tab sync**: Components bound to the same key in one tab stay in sync — updating one re-renders the others without a reload. (`sessionStorage` is per-tab, so this does not cross tabs.) The cross-tab `storage` listener is on by default; disable it with `listenToStorageChanges: false`.
 - **Custom serialization**: Provide `serializer.read` and `serializer.write` in the options for non-string data types.
 - See also `useLocalStorage` for persistent storage and `useCookie` for cookie-based persistence.
 
@@ -7826,4 +7904,4 @@ function Demo() {
 ---
 
 
-Generated: 2026-05-20T20:21:53.456Z | Total hooks: 114
+Generated: 2026-08-11T02:11:13.038Z | Total hooks: 114

packages/website-astro/public/llms.txt

@@ -1110,4 +1110,4 @@ PDD (Pinduoduo), Shopee, Ctrip, Bambu Lab
 Unlicense - Use freely without restrictions
 
 ---
-Generated: 2026-05-20T20:21:53.426Z | Total Hooks: 114
+Generated: 2026-08-11T02:11:13.001Z | Total Hooks: 114

packages/website-astro/src/content/docs-zh-hans/sponsor.md

@@ -1,10 +1,61 @@
 ---
-title: 赞助支持
+title: 赞助 ReactUse
 sidebar_label: 赞助支持
-description: "支持 ReactUse——如果 @reactuses/core 对你有帮助,欢迎赞助这个 React hooks 库的持续开发与维护。"
+description: "赞助 ReactUse——让你的产品出现在每月安装 @reactuses/core 超过 160 万次的 React 开发者面前。金、银、铜三档赞助，README 与官网 logo 展示位。"
 ---
-# 支持我
+# 赞助 ReactUse
 
-如果我的工作对您有帮助，考虑给我买杯咖啡吧，非常感谢！
+ReactUse 免费、MIT 协议开源，由维护者利用业余时间维护。赞助不仅支撑着 100+ hooks 的持续维护、SSR 兼容与交互式文档，也是把你的产品直接呈现给一线 React 开发者的最有效方式。
 
-[Buy me a coffee](https://www.buymeacoffee.com/lianwenwu)
+## 为什么值得赞助
+
+- [`@reactuses/core`](https://www.npmjs.com/package/@reactuses/core) **每月 npm 安装量超过 <span id="live-npm-dl">160 万</span>次**——你的 logo 会出现在开发者正在写代码的那一刻
+- **100+ 生产可用的 hooks**，拼多多、Shopee、携程等公司在生产环境使用
+- **reactuse.com 每月出现在 10 万+ 次 Google 搜索中**——文档是开发者反复查阅的日常参考，不是一次性流量
+- **纯开发者受众**：看到你 logo 的人，正是天天为团队选型库、工具和基础设施的人
+
+## 赞助档位
+
+| 档位 | 每月 | 你将获得 |
+| --- | --- | --- |
+| 🥇 **金牌赞助** | $500 | 大尺寸 logo + 链接，置于 **GitHub README 顶部**及本页。首位展示，曝光最大化。 |
+| 🥈 **银牌赞助** | $150 | 中尺寸 logo + 链接，展示于 GitHub README 及本页。 |
+| 🥉 **铜牌赞助** | $50 | 小尺寸 logo + 链接，展示于 GitHub README 及本页。 |
+| ☕ **支持者** | $5 | 你的名字列在本页 + 我们真诚的感谢。 |
+
+所有档位均通过 [**GitHub Sponsors**](https://github.com/sponsors/childrentime) 结算——发票由 GitHub 开具，多数公司无需走采购流程即可报销。随时可取消。
+
+**logo 会在赞助后 48 小时内上线**——README 和本页同步展示，亮色 / 暗色模式都会适配。
+
+## 当前赞助商
+
+以上所有展示位目前**全部空缺**——第一位金牌赞助商将独享这个每周被数千名开发者看到的 README 头部位置。
+
+<p align="center">
+  <a href="https://github.com/sponsors/childrentime"><img alt="金牌赞助位——虚位以待" src="https://img.shields.io/badge/%F0%9F%A5%87%20Gold-your%20logo%20here-FFD700?style=for-the-badge&labelColor=24292e"></a>
+  <a href="https://github.com/sponsors/childrentime"><img alt="银牌赞助位——虚位以待" src="https://img.shields.io/badge/%F0%9F%A5%88%20Silver-your%20logo%20here-C0C0C0?style=for-the-badge&labelColor=24292e"></a>
+  <a href="https://github.com/sponsors/childrentime"><img alt="铜牌赞助位——虚位以待" src="https://img.shields.io/badge/%F0%9F%A5%89%20Bronze-your%20logo%20here-CD7F32?style=for-the-badge&labelColor=24292e"></a>
+</p>
+
+## 如何赞助
+
+- **按月赞助（公司或个人）：** [github.com/sponsors/childrentime](https://github.com/sponsors/childrentime)
+- **一次性支持：** [Buy me a coffee](https://www.buymeacoffee.com/lianwenwu)，或在 GitHub Sponsors 选择一次性金额
+- **定制合作**（其他展示位置、直接开票、长期合作）：发邮件至 [wul55267@gmail.com](mailto:wul55267@gmail.com)——48 小时内回复
+
+## 赞助资金的去向
+
+赞助将直接用于维护工作：修复 bug 与审查 PR、保持每个 hook 兼容新版 React 与浏览器、编写测试与交互式文档，以及支付基础设施费用（CI、搜索、托管）。没有中间环节——100% 投入开发。
+
+感谢你让开源可持续。🥰
+
+<script>
+// 实时安装量（API 不可达时回退到上文的静态数字）
+fetch("https://api.npmjs.org/downloads/point/last-month/@reactuses/core")
+  .then(function (r) { return r.json(); })
+  .then(function (d) {
+    var el = document.getElementById("live-npm-dl");
+    if (el && d && d.downloads) el.textContent = Math.round(d.downloads / 10000) + " 万";
+  })
+  .catch(function () {});
+</script>

packages/website-astro/src/content/docs-zh-hant/sponsor.md

@@ -1,10 +1,61 @@
 ---
-title: 贊助支持
+title: 贊助 ReactUse
 sidebar_label: 贊助支持
-description: "支持 ReactUse——如果 @reactuses/core 對你有幫助,歡迎贊助這個 React hooks 函式庫的持續開發與維護。"
+description: "贊助 ReactUse——讓你的產品出現在每月安裝 @reactuses/core 超過 160 萬次的 React 開發者面前。金、銀、銅三檔贊助，README 與官網 logo 展示位。"
 ---
-# 支持我
+# 贊助 ReactUse
 
-如果我的工作對您有幫助，考慮給我買杯咖啡吧，非常感謝！
+ReactUse 免費、MIT 授權開源，由維護者利用業餘時間維護。贊助不僅支撐著 100+ hooks 的持續維護、SSR 相容與互動式文件，也是把你的產品直接呈現給第一線 React 開發者的最有效方式。
 
-[Buy me a coffee](https://www.buymeacoffee.com/lianwenwu)
+## 為什麼值得贊助
+
+- [`@reactuses/core`](https://www.npmjs.com/package/@reactuses/core) **每月 npm 安裝量超過 <span id="live-npm-dl">160 萬</span>次**——你的 logo 會出現在開發者正在寫程式的那一刻
+- **100+ 生產可用的 hooks**，拼多多、Shopee、攜程等公司在生產環境使用
+- **reactuse.com 每月出現在 10 萬+ 次 Google 搜尋中**——文件是開發者反覆查閱的日常參考，不是一次性流量
+- **純開發者受眾**：看到你 logo 的人，正是天天為團隊選型函式庫、工具和基礎設施的人
+
+## 贊助檔位
+
+| 檔位 | 每月 | 你將獲得 |
+| --- | --- | --- |
+| 🥇 **金牌贊助** | $500 | 大尺寸 logo + 連結，置於 **GitHub README 頂部**及本頁。首位展示，曝光最大化。 |
+| 🥈 **銀牌贊助** | $150 | 中尺寸 logo + 連結，展示於 GitHub README 及本頁。 |
+| 🥉 **銅牌贊助** | $50 | 小尺寸 logo + 連結，展示於 GitHub README 及本頁。 |
+| ☕ **支持者** | $5 | 你的名字列在本頁 + 我們真誠的感謝。 |
+
+所有檔位均透過 [**GitHub Sponsors**](https://github.com/sponsors/childrentime) 結算——發票由 GitHub 開立，多數公司無需走採購流程即可報銷。隨時可取消。
+
+**logo 會在贊助後 48 小時內上線**——README 和本頁同步展示，亮色 / 暗色模式都會適配。
+
+## 目前贊助商
+
+以上所有展示位目前**全部空缺**——第一位金牌贊助商將獨享這個每週被數千名開發者看到的 README 頂部位置。
+
+<p align="center">
+  <a href="https://github.com/sponsors/childrentime"><img alt="金牌贊助位——虛位以待" src="https://img.shields.io/badge/%F0%9F%A5%87%20Gold-your%20logo%20here-FFD700?style=for-the-badge&labelColor=24292e"></a>
+  <a href="https://github.com/sponsors/childrentime"><img alt="銀牌贊助位——虛位以待" src="https://img.shields.io/badge/%F0%9F%A5%88%20Silver-your%20logo%20here-C0C0C0?style=for-the-badge&labelColor=24292e"></a>
+  <a href="https://github.com/sponsors/childrentime"><img alt="銅牌贊助位——虛位以待" src="https://img.shields.io/badge/%F0%9F%A5%89%20Bronze-your%20logo%20here-CD7F32?style=for-the-badge&labelColor=24292e"></a>
+</p>
+
+## 如何贊助
+
+- **按月贊助（公司或個人）：** [github.com/sponsors/childrentime](https://github.com/sponsors/childrentime)
+- **一次性支持：** [Buy me a coffee](https://www.buymeacoffee.com/lianwenwu)，或在 GitHub Sponsors 選擇一次性金額
+- **客製合作**（其他展示位置、直接開票、長期合作）：來信 [wul55267@gmail.com](mailto:wul55267@gmail.com)——48 小時內回覆
+
+## 贊助資金的去向
+
+贊助將直接用於維護工作：修復 bug 與審查 PR、保持每個 hook 相容新版 React 與瀏覽器、撰寫測試與互動式文件，以及支付基礎設施費用（CI、搜尋、託管）。沒有中間環節——100% 投入開發。
+
+感謝你讓開源永續。🥰
+
+<script>
+// 實時安裝量（API 不可達時回退到上文的靜態數字）
+fetch("https://api.npmjs.org/downloads/point/last-month/@reactuses/core")
+  .then(function (r) { return r.json(); })
+  .then(function (d) {
+    var el = document.getElementById("live-npm-dl");
+    if (el && d && d.downloads) el.textContent = Math.round(d.downloads / 10000) + " 萬";
+  })
+  .catch(function () {});
+</script>