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