React Emoji Feedback Component

A highly customizable React component for emoji-based ratings and feedback with smooth animations and multiple interaction modes.

Full Documentation

Installation

npm install @evaficy/react-emoji-feedback
# or
yarn add @evaficy/react-emoji-feedback

Quick Start

import { EmojiFeedback } from '@evaficy/react-emoji-feedback';

function App() {
  return (
    <EmojiFeedback
      scale="satisfaction"
      title="How satisfied are you with our service?"
      onRatingChange={(rating, intensity, scale) => {
        console.log('Rating:', scale.labels[rating]);
      }}
    />
  );
}

Key Features

• 🎭 Multiple Predefined Scales: happiness, satisfaction, effort, custom
• 🎨 Fully Customizable: Custom emojis, labels, and styling
• 📏 Multiple Sizes: small, medium, large
• 📐 Layout Options: horizontal, vertical
• ⚡ Intensity Levels: Optional sub-levels for more granular feedback
• 🎯 Interactive: Smooth animations and hover effects
• 📱 Responsive: Works on all screen sizes

Basic Usage Examples

Predefined Scale

<EmojiFeedback 
  scale="happiness"
  title="How are you feeling today?"
/>

Custom Scale

<EmojiFeedback
  emojis={['🥶', '🙂', '🔥', '🚀', '🌟']}
  labels={['Cold', 'Okay', 'Hot', 'Amazing', 'Perfect']}
  title="Rate the temperature"
/>

With Intensity Levels

<EmojiFeedback
  scale="satisfaction"
  enableIntensity={true}
  onRatingChange={(rating, intensity, scale) => {
    console.log(`${scale.labels[rating]} - Level ${intensity}`);
  }}
/>

Props

Prop	Type	Default	Description
scale	string	'happiness'	Predefined scale: 'happiness', 'satisfaction', 'effort', 'custom'
emojis	array	null	Custom emoji array ['😞', '😟', '😐', '😊', '😍']
labels	array	null	Custom labels array ['Very Sad', 'Sad', 'Neutral', 'Happy', 'Very Happy']
title	string	null	Title displayed above the component
size	string	'large'	Size: 'small', 'medium', 'large'
layout	string	'horizontal'	Layout: 'horizontal', 'vertical'
enableIntensity	boolean	false	Enable intensity sub-levels
showLabels	boolean	true	Show emoji labels on hover/selection
onRatingChange	function	null	Callback: (rating, intensity, scale) => {}

Use Cases

• Customer Satisfaction Surveys
• User Experience Feedback
• Product Reviews
• Mood Tracking
• Difficulty Assessment
• Quality Ratings

Requirements

• React 16.8+
• TailwindCSS (for styling)

License

MIT License