React Integration

Getting started

The Feelback integration for React provides:

• Builtin components with presets ready to use in your pages
• Hooks for easy interaction with the Feelback API, useful for building custom components
• Optional styling you can adopt for nice-looking components with no effort

Prerequisite

• node 14+
• react 17+ (peer dependency)

Setup

You can install the library with your preferred package manager:

npm install @feelback/react

pnpm add @feelback/react

yarn add @feelback/react

The package is completely tree-shakable. You can take advantage of bundlers like Vite or esbuild to trim the final package size with only the components you actually use.

After the package is installed, you can import components and presets:

import { FeelbackPulse, PRESET_PULSE_HEART } from "@feelback/react";

function PostTitle({ title }) {
    return (
        <div>
            <h1>{title}</h1>
            <FeelbackPulse contentSetId="content-set-id-from-the-panel"
                preset={PRESET_PULSE_HEART}
                showCount
            />
        </div>
    );
}

The package provides a predefined style you can import:

import "@feelback/react/styles/feelback.css";

More info about style customization in the dedicated section.

Target content

For each Feelback* component you need to set the target content, that is, the content that will receive the feelback. You can do either:

• set the pair contentSetId / key properties: for the auto target
• set the contentId property: for pre-existing global id identification

For more info about how to identify the target content, checkout guide how to set the target content.

Properties

Components

FeelbackPulse

Display an icon button allowing users to activate it. Used to receive a Pulse feelback on your content.

Optionally, you can show a counter, which tracks the total amount of pulses received for the current content.

Properties

Presets

The FeelbackPulse component supports the following presets:

Example

import { FeelbackPulse, PRESET_PULSE_HEART } from "@feelback/react";

function PostTitle({ title }) {
    return (
        <div>
            <h1>{title}</h1>
            <FeelbackPulse contentSetId="content-set-id-from-the-panel"
                preset={PRESET_PULSE_HEART}
                showCount
            />
        </div>
    );
}

FeelbackYesNo

Display a question text with two buttons, allowing to send a positive or negative signal. You can use it to receive a YesNo feelback on your content. The usual scenario is the Did you like this page? feedback.

You can customize the question text or hide it, thus, showing only the two buttons.

Optionally, you can show a counter near each button to display both the number of yes and no.

Properties

Presets

The FeelbackYesNo component supports the following presets:

Example

import { FeelbackYesNo, PRESET_LIKE_DISLIKE } from "@feelback/react";

function Sidebar() {
    return (
        <div id="sidebar">
            <a href="/">Home</a>
            <FeelbackYesNo contentSetId="content-set-id-from-the-panel"
                preset={PRESET_LIKE_DISLIKE}
                textQuestion="Did you find this guide useful?"
                textAnswer="Thanks for your feedback"
            />
        </div>
    );
}

Hooks

useSendFeelback

Send a feelback for a resource. It can used to create a new feelback or to change a previous one.

useRemoveFeelback

Cancel a feelback sent previously for a resource.

useFeelbackAggregates

Get the feelback aggregation values for a specified resource.

useLocalFeelback

Get the locally-stored copy of the feelback value for a specified resource.

Style

Feelback components can use the default style provided by the package:

import "@feelback/react/styles/feelback.css";