@creativecreate/react-footnotes 1.0.14 → 1.0.17

package/README.md

@@ -11,7 +11,7 @@ Maintaining footnotes with proper numbering across different components and page
 - 🔁 Smart duplicate detection: multiple references to the same footnote automatically share the same number, preventing duplicate entries
 - 🔗 Smart bidirectional navigation: navigate between footnote references and content, with intelligent tracking that traces back to the current reference location even when duplicate references exist
 - 🎯 Flexible content sources: provide footnote content via messages file, callback function (`getContent`), or inline children — choose the approach that fits your needs
-- 🌐 Framework-agnostic: Compatible with Next.js App Router, Remix, Vite, and other React frameworks
+- 🌐 Framework-agnostic: Compatible with Next.js App Router ([see integration guide](./NEXTJS_INTEGRATION.md)), Remix, Vite, and other React frameworks
 - ♿ Web accessibility compatible: built with ARIA attributes, semantic HTML, keyboard navigation support, and screen reader compatibility following WAI-ARIA best practices
 - 🎨 Fully customizable with custom CSS to match your design style, with built-in responsive design support for all device sizes
 - 📦 TypeScript support
@@ -23,6 +23,17 @@ Maintaining footnotes with proper numbering across different components and page
 npm install @creativecreate/react-footnotes
 ```
 
+## Next.js App Router
+
+> **⚠️ Important for Next.js Users:** This package uses React Context and requires a `pathname` prop, which means it requires client components. If you're using Next.js App Router, you may encounter server/client boundary errors. See our **[Next.js Integration Guide](./NEXTJS_INTEGRATION.md)** for detailed instructions on:
+> - Setting up `FootnoteProvider` in layouts with automatic pathname handling
+> - Handling server/client component boundaries
+> - Managing the required `pathname` prop with Next.js hooks
+> - Common errors and solutions (like `createContext is not a function`, `usePathname() can only be used in Client Components`)
+> - Best practices for preserving server-side rendering
+
+**Quick Fix:** If you see `createContext is not a function` errors, mark components using `Footnote` with `'use client'` or extract the UI into a separate client component. For the `pathname` prop, use Next.js `usePathname()` and `useSearchParams()` hooks in a client component. See the [Next.js guide](./NEXTJS_INTEGRATION.md) for complete examples.
+
 ## Basic Usage
 
 ### 1. Create your messages file
@@ -165,7 +176,7 @@ You can also use the `className` props on components to apply your own custom cl
 
 **Example output:**
 
-![Footnotes rendered in footer](https://raw.githubusercontent.com/CreativeCreate/react-footnotes/main/packages/react-footnotes/example.png)
+![Footnotes rendered in footer](https://raw.githubusercontent.com/CreativeCreate/npm-packages/main/packages/react-footnotes/example.png)
 
 ## Advanced Usage
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@creativecreate/react-footnotes",
-  "version": "1.0.14",
+  "version": "1.0.17",
   "description": "A React component library for managing footnotes with citation and special symbol support",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -30,7 +30,7 @@
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "https://github.com/CreativeCreate/react-footnotes.git"
+    "url": "https://github.com/CreativeCreate/npm-packages.git"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",