A React widget to get feedback
React Roast is an open-source app inspector that allows users to select elements on a webpage, capture their state (including screenshots), and send the details to a desired channel. This tool is useful for UI/UX testing, feedback collection, and debugging user interfaces.
Demo — RoastNest.com | Growati.com
✅ Select any element on a webpage
✅ Capture element position, size, and a screenshot
✅ Supports React-based frameworks like Next.js
✅ Supports self-host and customization
✅ Lightweight and easy to integrate
✅ Written in Typescript and build using rollup
npm install react-roastor
yarn add react-roastWrap your app with WidgetProvider provided by react-roast. The provider should be in client side and mode should be set to local and onFormSubmit should be defined.
import WidgetProvider, { FormDataProps } from "react-roast";
export default function App() {
const handleSubmit = async ({ message, screenshot }: FormDataProps): Promise<boolean> => {
// Must return boolean value.
try {
// Send message to desired channel like, Slack or discord
return true;
} catch (e) {
return false;
}
};
return (
<WidgetProvider mode="local" onFormSubmit={handleSubmit}>
<Main />
</WidgetProvider>
);
}"use client";
import WidgetProvider, { FormDataProps } from "react-roast";
import { ReactNode } from "react";
export default function ReactRoastProvider({ children: ReactNode }) {
const handleSubmit = async ({ message, screenshot }: FormDataProps): Promise<boolean> => {
// Must return boolean value.
try {
// Send message to desired channel like, Slack or discord
return true;
} catch (e) {
return false;
}
};
return (
<WidgetProvider mode="local" onFormSubmit={handleSubmit}>
{children}
</WidgetProvider>
);
}In app/layout.tsx
export default function RootLayout({ children }) {
return (
<html>
<body>
<ReactRoastProvider>{children}</ReactRoastProvider>
</body>
</html>
);
}| Property | Type | Description |
|---|---|---|
mode |
local or remote |
Defines if the widget operates locally or remotely |
children |
ReactNode |
Nested components inside the provider |
disable |
boolean |
Disable the widget |
onFormSubmit |
function |
Callback function for form submission |
customize |
object |
Customization options |
You can customize the widget by passing customize props with the following options:
| Property | Type | Description |
|---|---|---|
form.className |
string |
Custom class for the form |
form.messageInput.placeholder |
string |
Placeholder text for message input |
form.submitButton.label |
string |
Label for submit button |
form.cancelButton.label |
string |
Label for cancel button |
island.direction |
left or right |
Position of the floating button |
island.className |
string |
Custom class for the floating button |
island.label |
string |
Label for the floating button |
| Property | Type | Description |
|---|---|---|
message |
string |
The message input by the user. |
screenshot |
Blob |
The captured screenshot of the selected element. |
Contributions are welcome! If you would like to improve react roast, please follow these steps:
- Fork the repository.
- Create a new branch for your feature or fix.
- Make changes and commit them.
- Submit a pull request.
Please ensure your contributions align with the project’s coding standards and best practices. If You want help, contact here
MIT License.