Show HN: I made an open-source feedback tool that captures context, not noise

4 months ago 4

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.

✅ 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

Wrap 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