@feedinsight/react v0.1.2

FeedInsight React

This is offical React & Next.Js libraty for FeedInsight. A lightweight and customizable React component library for collecting user feedback through elegant popover and dialog widgets.

Check out FeedInsight's offerings

Installation

npm install @feedinsight/react

Components

Popover

A floating feedback form that appears next to a trigger element.

Props

Example

import FeedbackWidget from '@feedinsight/react';

function App() {
	return <FeedbackWidget.Popover projectId="your-project-id" theme="dark" align="right" trigger={<button>Feedback</button>} user={{ email: 'user@example.com', name: 'John Doe' }} />;
}

Dialog

A modal feedback form that appears in the center of the screen.

Props

Example

import FeedbackWidget from '@feedinsight/react';

function App() {
	return <FeedbackWidget.Dialog projectId="your-project-id" theme="light" trigger={<button>Give Feedback</button>} user={{ email: 'user@example.com' }} />;
}

Theme

You can customize the theme of the widget by passing a customTheme prop. The customTheme prop should be an object with two properties: dark and light. Each property should be an object with the following keys:

const defaultThemes = {
	dark: {
		primary_muted: '#a8a29e',
		background: '#0c0a09',
		primary: '#fafaf9',
		border: '#292524',
		brand: '#ea580c',
		error: '#f43f5e',
		rounded: '1rem'
	},
	light: {
		primary_muted: '#0c0a09',
		background: '#ffffff',
		primary: '#0c0a09',
		border: '#e7e5e4',
		brand: '#ea580c',
		error: '#f43f5e',
		rounded: '1rem'
	}
};