Add integration examples for Create React App, Next.js, and Vite/Vue/Angular in demo page#61
Open
Aarya-Chaudhari wants to merge 9 commits intoAOSSIE-Org:mainfrom
Open
Add integration examples for Create React App, Next.js, and Vite/Vue/Angular in demo page#61Aarya-Chaudhari wants to merge 9 commits intoAOSSIE-Org:mainfrom
Aarya-Chaudhari wants to merge 9 commits intoAOSSIE-Org:mainfrom
Conversation
Contributor
Author
|
Hello @kpj2006 Create React App Each section includes relevant code snippets and uses the existing copy-to-clipboard functionality, while keeping the same UI style as the current demo sections. Please review and let me know if any changes required |
|
Warning Rate limit exceeded
⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. ⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (1)
📝 WalkthroughWalkthroughRefactors SocialShareButton to add browser-aware init, ownership-aware DOM handling, idempotent event wiring, a robust copy workflow (Clipboard API + fallback), and a new destroy() lifecycle; expands Changes
Sequence Diagram(s)sequenceDiagram
participant User as User
participant Btn as SocialShareButton
participant Modal as Modal/Overlay
participant Clipboard as Clipboard API
participant App as App Callback
User->>Btn: click button
Btn->>Btn: handleButtonClick (open modal, attach events)
Btn->>Modal: show()
User->>Modal: click "Copy"
Modal->>Btn: handleCopyClick
Btn->>Clipboard: navigator.clipboard.writeText()
alt clipboard success
Clipboard-->>Btn: success
Btn->>Btn: reset UI, isCopying=false
Btn->>App: onCopy callback
else fallback
Btn->>Btn: fallback copy (input select / execCommand)
Btn-->>App: onCopy callback (if success)
end
User->>Modal: click overlay / press Escape
Modal->>Btn: handleClose -> hide modal, detach listeners
App->>Btn: call destroy() -> remove handlers, owned DOM, restore overflow
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes Possibly related PRs
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. 📋 Issue PlannerBuilt with CodeRabbit's Coding Plans for faster development and fewer bugs. View plan used: ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
index.html (1)
392-404:⚠️ Potential issue | 🟠 MajorFix malformed React snippet markup in this code block.
Line 392 closes
<code>prematurely, so Lines 394-404 are outside the code element and the copy action only captures the first line.💡 Proposed fix
- <code>import SocialShareButton from 'social-share-button';</code> + <code>import SocialShareButton from 'social-share-button'; function App() { return ( <SocialShareButton url="https://your-website.com" title="Check this out!" onShare={(platform) => { console.log('Shared on:', platform); }} /> ); -}</code> +}</code>🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@index.html` around lines 392 - 404, The code block for the React snippet is broken because the </code> tag closes too early; reopen or move the <code> wrapper so the entire snippet (including import SocialShareButton and function App { ... }) is inside the same code element and ensure angle brackets are escaped or use a <pre><code> block to preserve JSX. Locate the snippet around the SocialShareButton import and the App component and wrap the whole section in a single code container (or convert to a pre/code pair) so copy captures all lines and JSX remains intact.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@src/social-share-button.js`:
- Around line 385-406: The destroy() method currently performs unguarded DOM
cleanup (accessing document.body) which can throw in SSR; update destroy() to
early-return or skip DOM operations when document or window is undefined by
wrapping browser-only calls (document.removeEventListener,
this.button.removeEventListener, this.button.parentNode.removeChild,
this.modal.parentNode.removeChild, and document.body.style.overflow) in a check
like typeof document !== 'undefined' && document?.body, or guard each use;
ensure you still tear down any non-DOM state (e.g., this.eventsAttached = false)
and reference the existing symbols this.handleKeydown, this.button,
this.customColorMouseEnterHandler, this.customColorMouseLeaveHandler,
this.ownsButton, and this.modal when adding the guards.
- Around line 73-81: When a container already contains a .social-share-btn the
code currently skips append but leaves this.button detached and this.ownsButton
true; change the logic in the constructor/initializer around options.container
to detect an existing button (const existing =
container.querySelector('.social-share-btn')), and if found assign this.button =
existing and set this.ownsButton = false (instead of creating a detached
button), and avoid creating duplicate modal/listeners or re-initializing if the
existing element is already initialized (check a marker/data attribute or a
flag). If no existing button is found, proceed to append the newly created
button and set this.ownsButton = true as before. Ensure you reference the
options.container handling and the this.button / this.ownsButton fields in your
changes.
---
Outside diff comments:
In `@index.html`:
- Around line 392-404: The code block for the React snippet is broken because
the </code> tag closes too early; reopen or move the <code> wrapper so the
entire snippet (including import SocialShareButton and function App { ... }) is
inside the same code element and ensure angle brackets are escaped or use a
<pre><code> block to preserve JSX. Locate the snippet around the
SocialShareButton import and the App component and wrap the whole section in a
single code container (or convert to a pre/code pair) so copy captures all lines
and JSX remains intact.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 81b289e5-3907-4c63-958d-d4f57677e274
📒 Files selected for processing (2)
index.htmlsrc/social-share-button.js
Comment on lines
+385
to
+406
| if (this.handleKeydown) { | ||
| document.removeEventListener('keydown', this.handleKeydown); | ||
| } | ||
|
|
||
| if (this.button && this.customColorMouseEnterHandler) { | ||
| this.button.removeEventListener('mouseenter', this.customColorMouseEnterHandler); | ||
| } | ||
|
|
||
| if (this.button && this.customColorMouseLeaveHandler) { | ||
| this.button.removeEventListener('mouseleave', this.customColorMouseLeaveHandler); | ||
| } | ||
|
|
||
| if (this.ownsButton && this.button?.parentNode) { | ||
| this.button.parentNode.removeChild(this.button); | ||
| } | ||
|
|
||
| if (this.modal?.parentNode) { | ||
| this.modal.parentNode.removeChild(this.modal); | ||
| } | ||
|
|
||
| document.body.style.overflow = ''; | ||
| this.eventsAttached = false; |
There was a problem hiding this comment.
Guard destroy() DOM cleanup for SSR/non-browser execution.
Line 405 unconditionally accesses document.body, which can throw in non-browser runtimes. destroy() should safely no-op for DOM-specific cleanup when document is unavailable.
💡 Proposed fix
- if (this.handleKeydown) {
+ if (this.handleKeydown && typeof document !== 'undefined') {
document.removeEventListener('keydown', this.handleKeydown);
}
@@
- document.body.style.overflow = '';
+ if (typeof document !== 'undefined' && document.body) {
+ document.body.style.overflow = '';
+ }Based on learnings: SSR compatibility is important for public libraries under src/, including guarded browser-only code paths.
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| if (this.handleKeydown) { | |
| document.removeEventListener('keydown', this.handleKeydown); | |
| } | |
| if (this.button && this.customColorMouseEnterHandler) { | |
| this.button.removeEventListener('mouseenter', this.customColorMouseEnterHandler); | |
| } | |
| if (this.button && this.customColorMouseLeaveHandler) { | |
| this.button.removeEventListener('mouseleave', this.customColorMouseLeaveHandler); | |
| } | |
| if (this.ownsButton && this.button?.parentNode) { | |
| this.button.parentNode.removeChild(this.button); | |
| } | |
| if (this.modal?.parentNode) { | |
| this.modal.parentNode.removeChild(this.modal); | |
| } | |
| document.body.style.overflow = ''; | |
| this.eventsAttached = false; | |
| if (this.handleKeydown && typeof document !== 'undefined') { | |
| document.removeEventListener('keydown', this.handleKeydown); | |
| } | |
| if (this.button && this.customColorMouseEnterHandler) { | |
| this.button.removeEventListener('mouseenter', this.customColorMouseEnterHandler); | |
| } | |
| if (this.button && this.customColorMouseLeaveHandler) { | |
| this.button.removeEventListener('mouseleave', this.customColorMouseLeaveHandler); | |
| } | |
| if (this.ownsButton && this.button?.parentNode) { | |
| this.button.parentNode.removeChild(this.button); | |
| } | |
| if (this.modal?.parentNode) { | |
| this.modal.parentNode.removeChild(this.modal); | |
| } | |
| if (typeof document !== 'undefined' && document.body) { | |
| document.body.style.overflow = ''; | |
| } | |
| this.eventsAttached = false; |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/social-share-button.js` around lines 385 - 406, The destroy() method
currently performs unguarded DOM cleanup (accessing document.body) which can
throw in SSR; update destroy() to early-return or skip DOM operations when
document or window is undefined by wrapping browser-only calls
(document.removeEventListener, this.button.removeEventListener,
this.button.parentNode.removeChild, this.modal.parentNode.removeChild, and
document.body.style.overflow) in a check like typeof document !== 'undefined' &&
document?.body, or guard each use; ensure you still tear down any non-DOM state
(e.g., this.eventsAttached = false) and reference the existing symbols
this.handleKeydown, this.button, this.customColorMouseEnterHandler,
this.customColorMouseLeaveHandler, this.ownsButton, and this.modal when adding
the guards.
There was a problem hiding this comment.
♻️ Duplicate comments (2)
src/social-share-button.js (2)
396-417:⚠️ Potential issue | 🟠 MajorGuard
destroy()for SSR/non-browser execution.Line 416 unconditionally accesses
document.body, which can throw in SSR/non-browser runtimes. Line 397 should use the same guard pattern.💡 Proposed fix
destroy() { + const hasDocument = typeof document !== 'undefined'; @@ - if (this.handleKeydown) { + if (hasDocument && this.handleKeydown) { document.removeEventListener('keydown', this.handleKeydown); } @@ - document.body.style.overflow = ''; + if (hasDocument && document.body) { + document.body.style.overflow = ''; + } this.eventsAttached = false; this.isCopying = false; }Based on learnings: SSR compatibility is important for public libraries under
src/, including guarded browser-only code paths and consistent SSR behavior.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/social-share-button.js` around lines 396 - 417, The destroy() cleanup currently accesses document.body unguarded and manipulates DOM nodes without confirming a browser environment; update destroy() to guard all browser-only operations by first checking typeof document !== 'undefined' (or a similar existing guard used earlier) before removing event listeners, touching this.button.parentNode/this.modal.parentNode, and setting document.body.style.overflow, and ensure you still clear this.eventsAttached and other non-DOM state (referencing destroy(), this.handleKeydown, this.button, this.customColorMouseEnterHandler, this.customColorMouseLeaveHandler, this.ownsButton, this.modal, and this.eventsAttached).
80-89:⚠️ Potential issue | 🟠 MajorPrevent duplicate modal/listener setup when reusing an existing container button.
At Line 82, an existing
.social-share-btnis reused, but initialization still proceeds with a new modal and new listeners. Re-initializing the same container can stack handlers and leave orphan modal instances.💡 Proposed fix
class SocialShareButton { constructor(options = {}) { @@ this.eventsAttached = false; this.isBrowser = typeof window !== 'undefined' && typeof document !== 'undefined'; + this.reusedInitializedButton = false; @@ init() { if (this.options.showButton) { this.createButton(); + if (this.reusedInitializedButton) return; } this.createModal(); this.attachEvents(); this.applyCustomColors(); } @@ if (container) { const existingButton = container.querySelector('.social-share-btn'); if (existingButton) { this.button = existingButton; this.ownsButton = false; + this.reusedInitializedButton = existingButton.dataset.ssbInitialized === 'true'; } else { container.appendChild(button); this.button = button; this.ownsButton = true; } } @@ attachEvents() { if (this.eventsAttached) return; @@ if (this.button) { + this.button.dataset.ssbInitialized = 'true'; this.handleButtonClick = () => this.openModal(); this.button.addEventListener('click', this.handleButtonClick); }🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/social-share-button.js` around lines 80 - 89, The code currently reuses an existingButton (queried as container.querySelector('.social-share-btn')) but still proceeds to create a new modal and attach event listeners, causing duplicate handlers and orphan modals; change initialization so that when existingButton is found you set this.button = existingButton and this.ownsButton = false and then skip the modal creation and listener setup steps (or only reattach idempotent handlers) — ensure the modal and listeners are only created/attached when this.ownsButton is true (or when modal/listener instance fields on the class are undefined), and bind any listeners to this.button and instance-level modal properties so re-initializing the same container does not stack handlers or create extra modal instances.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Duplicate comments:
In `@src/social-share-button.js`:
- Around line 396-417: The destroy() cleanup currently accesses document.body
unguarded and manipulates DOM nodes without confirming a browser environment;
update destroy() to guard all browser-only operations by first checking typeof
document !== 'undefined' (or a similar existing guard used earlier) before
removing event listeners, touching this.button.parentNode/this.modal.parentNode,
and setting document.body.style.overflow, and ensure you still clear
this.eventsAttached and other non-DOM state (referencing destroy(),
this.handleKeydown, this.button, this.customColorMouseEnterHandler,
this.customColorMouseLeaveHandler, this.ownsButton, this.modal, and
this.eventsAttached).
- Around line 80-89: The code currently reuses an existingButton (queried as
container.querySelector('.social-share-btn')) but still proceeds to create a new
modal and attach event listeners, causing duplicate handlers and orphan modals;
change initialization so that when existingButton is found you set this.button =
existingButton and this.ownsButton = false and then skip the modal creation and
listener setup steps (or only reattach idempotent handlers) — ensure the modal
and listeners are only created/attached when this.ownsButton is true (or when
modal/listener instance fields on the class are undefined), and bind any
listeners to this.button and instance-level modal properties so re-initializing
the same container does not stack handlers or create extra modal instances.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 88f750a9-96e3-4c6f-a9ef-bcef5f151e8f
📒 Files selected for processing (1)
src/social-share-button.js
There was a problem hiding this comment.
Actionable comments posted: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (2)
index.html (1)
405-420:⚠️ Potential issue | 🟠 MajorKeep the React snippet inside one
<code>block.Line 408 closes
<code>before the component example, so the copy button only captures the import line and the rest of the snippet falls outside the formatted block.Proposed fix
- <code>import SocialShareButton from 'social-share-button';</code> + <code> +import SocialShareButton from 'social-share-button'; function App() { return ( <SocialShareButton url="https://your-website.com" title="Check this out!" onShare={(platform) => { console.log('Shared on:', platform); }} /> ); -}</code> +} + </code>🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@index.html` around lines 405 - 420, The code block closes too early so only the import is inside the <code> element; move the closing </code> tag to after the entire React snippet so the import line and the <code> content for function App() ... are inside the same <code> element (keep the existing copy button element and the span.copy-status as-is); specifically update the HTML around the <code> tag that currently encloses only the import so that the whole snippet (from "import SocialShareButton..." through the closing component tag) is wrapped in one <code> block so the copy-btn copies the full snippet.src/social-share-button.js (1)
300-536:⚠️ Potential issue | 🔴 CriticalResolve merge conflicts and duplicate method definitions in
src/social-share-button.js.Lines 300–314 contain unresolved
<<<<<<< Updated upstream/=======/>>>>>>> Stashed changesmarkers. Additionally,fallbackCopy()(lines 424 and 470) anddestroy()(lines 436 and 496) are defined twice with interleaved bodies. The file is not valid JavaScript and cannot be parsed; any import will fail.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/social-share-button.js` around lines 300 - 536, Remove the Git conflict markers and fix the duplicated/interleaved methods: delete the <<<<<<</=======/>>>>>>> markers around openModal changes and keep a single openModal implementation (use the isBrowser/document.body guard before setting document.body.style.overflow); then consolidate the two fallbackCopy implementations into one consistent fallbackCopy(input, copyBtn?) that either returns boolean (if used by clipboard flow) or performs UI updates (choose one API pattern and update callers) — best is to keep the boolean-returning fallbackCopy(input) used by share/copy flow and a separate UI update routine used in copyLink; finally merge the two destroy() definitions into a single destroy method that removes all event listeners (button, modal, closeBtn, platformBtnHandlers, copyBtn, input, keydown, mouse enter/leave), cleans up DOM nodes once (remove button/modal if owned), resets document.body.style.overflow safely (guard with isBrowser/document.body), and clears flags like eventsAttached and isCopying; reference methods openModal, copyLink, fallbackCopy, and destroy when making these edits.
♻️ Duplicate comments (1)
src/social-share-button.js (1)
92-101:⚠️ Potential issue | 🟠 MajorReusing an existing button still double-initializes the container.
Line 99 checks
this.eventsAttached, but that flag is per-instance and startsfalseon every freshnew SocialShareButton(...). A second init against the same container still creates another modal and binds another click handler to the reused button. Reuse needs a DOM-level marker or stored instance reference soinit()can short-circuit beforecreateModal()/attachEvents().🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/social-share-button.js` around lines 92 - 101, The init() path reusing an existingButton must avoid per-instance this.eventsAttached checks because new instances start with false; update SocialShareButton.init() to detect prior initialization at the DOM level (e.g., check a dataset flag or store the SocialShareButton instance on the container/existingButton DOM element) and short-circuit before calling createModal() and attachEvents(); preserve this.ownsButton logic but set the DOM marker or element.__socialShareInstance to indicate events/modal are already attached and return early if present so duplicate modals/click handlers are not created.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@index.html`:
- Around line 424-517: The React/Next.js examples import the package's vanilla
JS class (SocialShareButton) which isn't the React component; update the
examples that use import SocialShareButton from 'social-share-button' to instead
import the React component entry (e.g., import SocialShareButton from
'social-share-button/react' or the library's React build path) or alternatively
add a proper React export in package.json exports so the same import resolves to
the React component; locate references in the demo sections for Create React
App, Next.js (App Router), and Next.js (Pages Router) where SocialShareButton is
imported and change the import target or update package.json exports
accordingly.
---
Outside diff comments:
In `@index.html`:
- Around line 405-420: The code block closes too early so only the import is
inside the <code> element; move the closing </code> tag to after the entire
React snippet so the import line and the <code> content for function App() ...
are inside the same <code> element (keep the existing copy button element and
the span.copy-status as-is); specifically update the HTML around the <code> tag
that currently encloses only the import so that the whole snippet (from "import
SocialShareButton..." through the closing component tag) is wrapped in one
<code> block so the copy-btn copies the full snippet.
In `@src/social-share-button.js`:
- Around line 300-536: Remove the Git conflict markers and fix the
duplicated/interleaved methods: delete the <<<<<<</=======/>>>>>>> markers
around openModal changes and keep a single openModal implementation (use the
isBrowser/document.body guard before setting document.body.style.overflow); then
consolidate the two fallbackCopy implementations into one consistent
fallbackCopy(input, copyBtn?) that either returns boolean (if used by clipboard
flow) or performs UI updates (choose one API pattern and update callers) — best
is to keep the boolean-returning fallbackCopy(input) used by share/copy flow and
a separate UI update routine used in copyLink; finally merge the two destroy()
definitions into a single destroy method that removes all event listeners
(button, modal, closeBtn, platformBtnHandlers, copyBtn, input, keydown, mouse
enter/leave), cleans up DOM nodes once (remove button/modal if owned), resets
document.body.style.overflow safely (guard with isBrowser/document.body), and
clears flags like eventsAttached and isCopying; reference methods openModal,
copyLink, fallbackCopy, and destroy when making these edits.
---
Duplicate comments:
In `@src/social-share-button.js`:
- Around line 92-101: The init() path reusing an existingButton must avoid
per-instance this.eventsAttached checks because new instances start with false;
update SocialShareButton.init() to detect prior initialization at the DOM level
(e.g., check a dataset flag or store the SocialShareButton instance on the
container/existingButton DOM element) and short-circuit before calling
createModal() and attachEvents(); preserve this.ownsButton logic but set the DOM
marker or element.__socialShareInstance to indicate events/modal are already
attached and return early if present so duplicate modals/click handlers are not
created.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: b6f00ee8-ba5c-4cde-8e69-a38a82804947
📒 Files selected for processing (2)
index.htmlsrc/social-share-button.js
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@index.html`:
- Around line 500-517: The demo imports the React build but uses the vanilla JS
constructor (import SocialShareButton from
'social-share-button/social-share-button-react'; new SocialShareButton(...)),
which is incorrect; update the import to the package's main vanilla export
(e.g., import SocialShareButton from 'social-share-button') so the constructor
pattern works, and adjust the demo code block that contains SocialShareButton
and the new SocialShareButton({...}) call accordingly.
- Around line 424-452: The new copy buttons inside the "⚛️ Create React App"
demo-section (the <button class="copy-btn"> elements in the code-blocks) are
missing accessible labels; add aria-label="Copy code" to each of those copy
buttons (the copy-btn buttons in the Create React App code-blocks and the other
newly added code-blocks referenced in the comment) so they match the existing
copy button pattern and provide screen-reader support.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: b5622a8d-573a-402a-ad1f-f957565e3fc2
📒 Files selected for processing (2)
index.htmlsrc/social-share-button.js
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Addressed Issues:
Fixes #45
This PR enhances the demo page (index.html) by adding integration examples for all supported frameworks and tech stacks.
Previously, the demo page only displayed a React Integration example. However, the library supports multiple frameworks such as:
Create React App
Next.js (App Router)
Next.js (Pages Router)
Vite / Vue / Angular
To make the demo page more useful for developers, this PR adds dedicated sections with integration code snippets for each supported framework, following the same UI pattern used in the existing demo sections.
Changes Made
The following sections were added to index.html:
Create React App
Next.js (App Router)
Next.js (Pages Router)
Vite / Vue / Angular
Each section includes:
A short description
Code snippets showing integration
Copy-to-clipboard button for the snippet
All new sections follow the same structure used in the demo page:
.demo-section
.code-block
.copy-btn
This keeps the UI consistent with the existing design.
Screenshots/Recordings:
Before
Previously the demo page contained only a React integration example.
Demo page before this PR
After
The demo page now includes integration examples for all supported tech stacks.
Demo page after this PR
Additional Notes:
Checklist
AI Usage Disclosure
Check one of the checkboxes below:
I have used the following AI models and tools: TODO
We encourage contributors to use AI tools responsibly when creating Pull Requests. While AI can be a valuable aid, it is essential to ensure that your contributions meet the task requirements, build successfully, include relevant tests, and pass all linters. Submissions that do not meet these standards may be closed without warning to maintain the quality and integrity of the project. Please take the time to understand the changes you are proposing and their impact. AI slop is strongly discouraged and may lead to banning and blocking. Do not spam our repos with AI slop.
Summary by CodeRabbit
Documentation
New Features
Improvements