React Roast is an innovative open-source app inspection tool designed to facilitate UI/UX testing, feedback collection, and user interface debugging. This powerful React widget enables users to effortlessly select elements on a webpage, capture their state including screenshots, and send the collected details to their preferred communication channels.

Key Features

• ✅ Element Selection: Effortlessly select any element on a webpage
• ✅ State Capture: Record element position, size, and screenshots
• ✅ Framework Compatibility: Fully supports React-based frameworks such as Next.js
• ✅ Customization: Options for self-hosting and customization for tailored use
• ✅ Lightweight Integration: Designed to be easy to integrate into existing projects
• ✅ Typescript Support: Built with Typescript and rollup for enhanced reliability

Demo

Explore the functionality of React Roast at RoastNest.com or Growati.com.

Usage Example

To implement React Roast in a React application, wrap the app with the WidgetProvider component. Set the mode to local and define the onFormSubmit function to handle submissions. Below is a sample implementation:

import WidgetProvider, { FormDataProps } from "react-roast";

export default function App() {
	const handleSubmit = async ({ message, screenshot }: FormDataProps): Promise<boolean> => {
		try {
			// Send message to desired channel like Slack or Discord
			return true;
		} catch (e) {
			return false;
		}
	};
	return (
		<WidgetProvider mode="local" onFormSubmit={handleSubmit}>
			<Main />
		</WidgetProvider>
	);
}

The widget also provides various properties for customization, including:

• mode: Choose between local or remote configurations.
• onFormSubmit: Callback function to handle form submissions
• Additional properties for customizing the appearance of the widget.

Contributing

Contributions to React Roast are encouraged. Interested contributors can follow these steps:

1. Fork the repository.
2. Create a new branch for feature additions or fixes.
3. Implement changes and commit them.
4. Submit a pull request.

Conformity to the project’s coding standards and best practices is expected. For assistance, contact here.

React Roast simplifies and enhances the process of UI/UX testing with a streamlined, user-friendly interface, making it an essential tool for developers aiming to improve the quality of their web applications.