React feedback widget

Installation

Using npm

npm install @happyreact/react

Using yarn

yarn add @happyreact/react

Using pnpm

pnpm add @happyreact/react

Usage

First, you need to create a Happy React project. You will get a token to connect the widget with Happy React. There you can change project settings, add domains to the whitelist, or see statistics.

Displaying widget with basic styling

This code lets you add the widget to your website with the basic styling that comes with the package.

// FeedbackWidget.jsx

import { Widget } from '@happyreact/react';
import '@happyreact/react/theme.css';

function FeedbackWidget() {
  return <Widget token="[token]" resource="users-happiness" />;
}
  • [token] - project token, find it in project settings
  • users-happiness - unique identifier of a resource

Custom styles using Global CSS

Use this if your application allows importing global styles. You can use default classes to style widget elements. Please see Happy React styling guide for more about styling.

// FeedbackWidget.jsx

import { Widget } from '@happyreact/react';
import './FeedbackWidget.css';

function FeedbackWidget() {
  return <Widget token="[token]" resource="users-happiness" />;
}

And here is our FeedbackWidget.css file:

/* FeedbackWidget.css */

.hr-container {
}

.hr-reaction {
}
💡

Remember to replace token and resource with your project's token and proper resource

Custom styles using classes

Use this with Module CSS. Import styles as a variable and assign them using classes property. This can let you add class to different elements of the widget. Please see Happy React styling guide for more about styling.

// FeedbackWidget.jsx

import { Widget } from '@happyreact/react';
import styles from './FeedbackWidget.module.css';

const classes = {
  root: styles.root,
  container: styles.container
};

function FeedbackWidget() {
  return (
    <Widget
      token="[token]"
      resource="users-happiness"
      classes={{
        root: styles.root,
        container: styles.container
      }}
    />
  );
}

And here is our FeedbackWidget.module.css file:

/* FeedbackWidget.module.css */

.root {
}

.container {
}
💡

Remember to replace token and resource with your project's token and proper resource

Reacting to user events

Right now you can use two events:

  • onReaction - fire after user reaction
  • onReactionsLimitReached - fire after the user reach the limit of reactions
// FeedbackWidget.jsx

import { Widget } from '@happyreact/react';

function FeedbackWidget() {
  return (
    <Widget
      token="[token]"
      resource="users-happiness"
      onReaction={(data) => {
        console.log('Reaction clicked with data', data);
      }}
      onReactionsLimitReached={() => {
        console.log('Reactions limit reached');
      }}
    />
  );
}
💡

Remember to replace token and resource with your project's token and proper resource

API

The Widget component lets you display a feedback widget with reactions and settings. Control these settings on Happy React dashboard.

Required props

PropTypeDescription
tokenstringToken of your project
resourcestring
Unique identifier of resource

Optional props

PropDefaultTypeDescription
classesstring |
{ root?: string; container?: string; grid?: string; cell?: string; reaction?: string; reactionActive?: string; reactionIcon?: string; reactionText?: string; }
Classes applied to widget elements. You can find them on Happy React styling guide
urlhttps://app.happyreact.comstringUrl where should widget get data. Used when you have own Happy React instance
onReaction(data: { id: string; icon: string; }) => voidEvent fired when user click reaction
onReactionsLimitReached() => voidEvent fired when user reach reactions limit
Was this page helpful?
Happy React is loading...
Last updated on December 1, 2022