@creativecreate/react-footnotes 1.0.0 → 1.0.2

package/README.md

@@ -61,6 +61,7 @@ const messages = messagesData.footnotes;
 ### 2. Wrap your app with FootnoteProvider and provide messages
 
 ```tsx
+import { useState, useEffect } from 'react';
 import { FootnoteProvider } from '@creativecreate/react-footnotes';
 import messagesData from './messages.json'; // Your custom messages file from your project
 
@@ -68,11 +69,18 @@ import messagesData from './messages.json'; // Your custom messages file from yo
 const messages = messagesData.footnotes;
 
 function App() {
+  const [pathname, setPathname] = useState('');
+  
+  useEffect(() => {
+    // Only access window on client-side
+    setPathname(`${window.location.pathname}${window.location.search}`);
+  }, []);
+  
   return (
     <FootnoteProvider 
       messages={messages}
-      // Alternative: see section - using React router
-      pathname={`${window.location.pathname}${window.location.search}`}
+      // Alternative: see section - using React Router (recommended for SPAs)
+      pathname={pathname}
     >
       {/* Your app content */}
     </FootnoteProvider>
@@ -114,9 +122,57 @@ function Footer() {
 }
 ```
 
+### 5. Add styling
+
+You have two options for styling the footnotes:
+
+**Option A: Use the default stylesheet from the package**
+
+Import the default stylesheet to get pre-styled footnotes:
+
+```tsx
+import '@creativecreate/react-footnotes/footnotes.css';
+```
+
+Add this import in your main entry file (e.g., `main.tsx`, `index.tsx`, or `_app.tsx` for Next.js).
+
+**Option B: Use your own CSS with the available class names**
+
+If you prefer to style the footnotes yourself, you can target the following CSS classes in your own stylesheet:
+
+```css
+/* Footnote reference button (the clickable superscript in text) */
+.footnote-ref { }
+
+/* Footnote symbol (the number or symbol inside the button) */
+.footnote-symbol { }
+
+/* Footnote list (ordered list) */
+.footnote-list { }
+
+/* Individual footnote list item */
+.footnote-list-item { }
+
+/* Symbol in the list item */
+.footnote-list-item__symbol { }
+
+/* Footnote content in the list item */
+.footnote-list-item__content { }
+
+/* Back to reference link button */
+.footnote-list-item__back-link { }
+
+/* Back link icon */
+.footnote-list-item__back-link-icon { }
+```
+
+You can also use the `className` props on components to apply your own custom classes (see [Customizing Styles](#customizing-styles) section for details).
+
+
+
 **Example output:**
 
-![Footnotes rendered in footer](./example.png)
+![Footnotes rendered in footer](https://raw.githubusercontent.com/CreativeCreate/react-footnotes/main/example.png)
 
 ## Advanced Usage
 

package/footnotes.css

@@ -10,6 +10,11 @@
     cursor: pointer;
     color: inherit;
     text-decoration: none;
+    /* 
+      Add scroll to top gap here if you have a fixed header,
+      and you want your footnote reference to scroll to the top
+      of the page but still be visible below the fixed header.
+    */
     scroll-margin-top: 1rem;
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@creativecreate/react-footnotes",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "A React component library for managing footnotes with citation and special symbol support",
   "main": "dist/index.js",
   "module": "dist/index.mjs",