React-roast NPM

React Roast

A React widget to get feedback

Purpose

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

Roastnest Widget Demo

Features

✅ 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

Installation

npm install react-roast

yarn add react-roast

Local Usage

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.

React Example

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>
	);
}

NextJS App Example

"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>
	);
}

Widget Props

Widget Provider Props

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

Widget Customize Props

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