React / Next.js Integration
Official React component for seamless integration with React and Next.js applications.
Installation
1. Install the Package
Install the official Suggesto React package using npm or yarn:
Basic Usage
2. Import and Use the Component
Import the SuggestoWidget component and add it to your React application:
xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx with your actual Board ID from the dashboardNext.js Integration
App Router (Next.js 13+) - Recommended Pattern
For Next.js App Router, create a Client Component wrapper to ensure proper hydration:
app/components/suggesto-provider.tsx
Then import it in your root layout:
app/layout.tsx
Pages Router (Next.js 12 and below)
Add the widget to your _app.js file:
pages/_app.js
Widget Configuration
All widget styling and behavior is configured through your Suggesto dashboard. The React component only requires the Board ID.
Available Event Handlers:
- onReady: Called when widget is initialized
- onFeedbackSubmitted: Called when user submits feedback
- onError: Called if widget encounters an error
Clean Integration with Events
Recommended Usage
Hook-based Usage (Advanced)
For more control over the widget lifecycle, use the useSuggesto hook:
Using the useSuggesto Hook
Conditional Rendering
You can conditionally render the widget based on user authentication or other app state:
Conditional Widget Rendering
Recent Improvements (v1.0.1)
Events are now properly queued and processed after widget loads. No more missed events due to timing issues!
Client Component wrapper pattern documented and tested. Works seamlessly with Server Components.
Troubleshooting
If you encounter hydration errors, try wrapping the widget with a dynamic import:
The widget will automatically update when props change. If issues persist, try adding a key prop: