A highly customizable React component for emoji-based ratings and feedback with smooth animations and multiple interaction modes.
Package: @evaficy/react-emoji-feedback
Version: 1.0.1 | License: MIT | Bundle Size: ~15KB minified
📋 Table of Contents
📦 Installation & Setup
Install the Package
# Using npm
npm install @evaficy/react-emoji-feedback
# Using yarn
yarn add @evaficy/react-emoji-feedback
# Using pnpm
pnpm add @evaficy/react-emoji-feedback
Demo:
Requirements
- React: 16.8+ (hooks support required)
- React DOM: 16.8+
- TailwindCSS: For styling (included in component)
💡 Tip: The component comes with built-in Tailwind CSS styles, so you don’t need to configure anything extra!
🚀 Quick Start
import React from ‘react’;
import { EmojiFeedback } from ‘@evaficy/react-emoji-feedback’;
function App() {
const handleRatingChange = (rating, intensity, scale) => {
console.log(‘Rating:’, rating);
console.log(‘Label:’, scale.labels[rating]);
console.log(‘Intensity:’, intensity);
};
return (
<div>
<EmojiFeedback
scale=”satisfaction”
title=”How satisfied are you with our service?”
onRatingChange={handleRatingChange}
/>
</div>
);
}
export default App;
✨ Key Features
🎭 Multiple Predefined Scales
Built-in scales for happiness, satisfaction, effort, and custom themes.
😞 😟 😐 😊 😍
🎨 Fully Customizable
Custom emojis, labels, colors, and complete theming control.
🥶 🙂 🔥 🚀 🌟
📏 Multiple Sizes
Small, medium, and large size options for different contexts.
😊 😊 😊
📐 Layout Options
Horizontal and vertical layouts to fit your design.
😊 😊 😊 😊 😊
⚡ Intensity Levels
Optional sub-levels (1-3) for more granular feedback.
😊 ● ● ●
🎯 Interactive Animations
Smooth hover effects, bounce animations, and transitions.
✨ 😊 ✨
📋 Props Reference
| Prop | Type | Default | Description |
|---|---|---|---|
scale |
string | object | 'happiness' |
Predefined scale name or custom scale object |
emojis |
string[] | null |
Custom emoji array (overrides scale) |
labels |
string[] | null |
Custom labels array (overrides scale) |
title |
string | null |
Title displayed above the component |
size |
‘small’ | ‘medium’ | ‘large’ | 'large' |
Size of emoji buttons |
layout |
‘horizontal’ | ‘vertical’ | 'horizontal' |
Layout direction |
enableIntensity |
boolean | false |
Enable intensity sub-levels (1-3) |
showLabels |
boolean | true |
Show labels on hover/selection |
onRatingChange |
function | null |
Callback: (rating, intensity, scale) => {} |
initialRating |
number | null |
Pre-selected rating (0-4) |
initialIntensity |
number | null |
Pre-selected intensity (1-3) |
🎨 Predefined Scales
Happiness Scale
😞 😟 😐 😊 😍
<EmojiFeedback scale=”happiness” title=”How are you feeling today?” />
Labels: Very Sad, Sad, Neutral, Happy, Very Happy
Satisfaction Scale
😡 😠 😐 😊 😁
<EmojiFeedback scale=”satisfaction” title=”Rate your experience” />
Labels: Angry, Dissatisfied, Neutral, Satisfied, Delighted
Effort Scale
😰 😓 😐 😌 😎
<EmojiFeedback scale=”effort” title=”How difficult was this task?” />
Labels: Very Hard, Hard, Moderate, Easy, Very Easy
Custom Energy Scale
🔥 ⚡ 💫 🌟 ✨
<EmojiFeedback scale=”custom” title=”Energy level check” />
Labels: Fire, Electric, Magic, Star, Sparkle
💡 Usage Examples
Basic Rating Component
import { EmojiFeedback } from ‘@evaficy/react-emoji-feedback’;
function BasicRating() {
return (
<EmojiFeedback
scale=”satisfaction”
title=”Rate our service”
onRatingChange={(rating, intensity, scale) => {
console.log(`User rated: ${scale.labels[rating]}`);
}}
/>
);
}
Custom Emoji Scale
function TemperatureRating() {
return (
<EmojiFeedback
emojis={[‘🥶’, ‘🙂’, ‘🔥’, ‘🚀’, ‘🌟’]}
labels={[‘Freezing’, ‘Cool’, ‘Warm’, ‘Hot’, ‘Blazing’]}
title=”How’s the temperature?”
size=”medium”
onRatingChange={(rating, intensity, scale) => {
console.log(`Temperature: ${scale.labels[rating]}`);
}}
/>
);
}
With Intensity Levels
function DetailedRating() {
return (
<EmojiFeedback
scale=”happiness”
title=”Rate with intensity”
enableIntensity={true}
onRatingChange={(rating, intensity, scale) => {
console.log(`Rating: ${scale.labels[rating]}`);
console.log(`Intensity: ${intensity}/3`);
}}
/>
);
}
Vertical Layout
function VerticalRating() {
return (
<EmojiFeedback
scale=”satisfaction”
layout=”vertical”
size=”small”
title=”Quick feedback”
/>
);
}
Pre-selected Rating
function PreSelectedRating() {
return (
<EmojiFeedback
scale=”happiness”
initialRating={3}
initialIntensity={2}
enableIntensity={true}
title=”Edit your previous rating”
/>
);
}
🔥 Advanced Features
Custom Scale Object
const customScale = {
emojis: [‘💀’, ‘😵’, ‘😐’, ‘😎’, ‘🎉’],
labels: [‘Terrible’, ‘Bad’, ‘Okay’, ‘Good’, ‘Awesome’],
name: ‘Gaming Experience Scale’
};
function GamingRating() {
return (
<EmojiFeedback
scale={customScale}
title=”Rate your gaming session”
enableIntensity={true}
onRatingChange={(rating, intensity, scale) => {
console.log(`Scale: ${scale.name}`);
console.log(`Rating: ${scale.labels[rating]}`);
console.log(`Intensity: ${intensity}`);
}}
/>
);
}
Multi-dimensional Rating System
function MultiRating() {
const aspects = [‘quality’, ‘speed’, ‘price’];
const [ratings, setRatings] = useState({});
const handleRatingChange = (aspect) => (rating, intensity, scale) => {
setRatings(prev => ({
…prev,
[aspect]: { rating, label: scale.labels[rating], intensity }
}));
};
return (
<div>
{aspects.map(aspect => (
<div key={aspect}>
<EmojiFeedback
scale=”satisfaction”
title={`Rate ${aspect}`}
onRatingChange={handleRatingChange(aspect)}
enableIntensity={true}
/>
</div>
))}
{/* Display results */}
<div>
<h3>Your Ratings:</h3>
{Object.entries(ratings).map(([aspect, data]) => (
<p key={aspect}>
{aspect}: {data.label} (Intensity: {data.intensity}/3)
</p>
))}
</div>
</div>
);
}
Conditional Rendering
function ConditionalRating() {
const [showIntensity, setShowIntensity] = useState(false);
const [selectedRating, setSelectedRating] = useState(null);
return (
<div>
<EmojiFeedback
scale=”satisfaction”
title=”How was your experience?”
enableIntensity={showIntensity}
onRatingChange={(rating, intensity, scale) => {
setSelectedRating(scale.labels[rating]);
// Enable intensity for ratings below neutral
setShowIntensity(rating < 2);
}}
/>
{selectedRating && (
<p>You selected: {selectedRating}</p>
)}
</div>
);
}
🎨 Styling & Customization
Size Variations
| Size | Emoji Size | Padding | Use Case |
|---|---|---|---|
| small | text-2xl | p-2 | Compact forms, sidebars |
| medium | text-3xl | p-2.5 | Standard forms, modals |
| large | text-4xl | p-3 | Main content, hero sections |
CSS Classes Used
/* Main container */
.w-full
/* Emoji buttons */
.text-4xl.p-3.rounded-full.transition-all.duration-300.transform
.scale-125.bg-blue-100 (selected)
.scale-110 (hovered)
.hover:bg-gray-100.focus:outline-none.focus:ring-2.focus:ring-blue-300
/* Intensity dots */
.w-3.h-3.rounded-full.border-2.transition-all.duration-200
.bg-blue-500.border-blue-500 (selected)
.bg-white.border-gray-300.hover:border-blue-400
/* Labels */
.absolute.top-full.left-1/2.transform.-translate-x-1/2
.px-2.py-1.bg-gray-800.text-white.text-xs.rounded.whitespace-nowrap
/* Animations */
.animate-bounce (selected emoji)
.animate-fadeIn (labels and intensity)
💡 Customization Tip: The component uses Tailwind CSS classes. You can override styles by wrapping the component in a div with custom CSS or by using Tailwind’s important modifier.
🎯 Use Cases & Examples
1. Customer Satisfaction Surveys
<EmojiFeedback
scale=”satisfaction”
title=”How satisfied are you with our product?”
enableIntensity={true}
onRatingChange={(rating, intensity, scale) => {
analytics.track(‘satisfaction_rating’, {
rating: rating,
label: scale.labels[rating],
intensity: intensity
});
}}
/>
2. User Experience Feedback
<EmojiFeedback
emojis={[‘😤’, ‘😕’, ‘😐’, ‘🙂’, ‘🤩’]}
labels={[‘Frustrated’, ‘Confused’, ‘Neutral’, ‘Easy’, ‘Delightful’]}
title=”How was the checkout process?”
size=”medium”
/>
3. Product Reviews
<EmojiFeedback
scale=”satisfaction”
title=”Rate this product”
enableIntensity={true}
onRatingChange={(rating, intensity, scale) => {
submitReview({
productId: productId,
rating: rating + 1, // Convert 0-4 to 1-5 stars
intensity: intensity,
feedback: scale.labels[rating]
});
}}
/>
4. Mood Tracking Applications
const moodEmojis = [‘😢’, ‘😟’, ‘😐’, ‘😊’, ‘😄’];
const moodLabels = [‘Very Sad’, ‘Sad’, ‘Neutral’, ‘Happy’, ‘Very Happy’];
<EmojiFeedback
emojis={moodEmojis}
labels={moodLabels}
title=”How are you feeling today?”
layout=”horizontal”
onRatingChange={(rating, intensity, scale) => {
saveMoodEntry({
date: new Date().toISOString(),
mood: rating,
label: scale.labels[rating],
intensity: intensity
});
}}
/>
5. Learning Difficulty Assessment
<EmojiFeedback
scale=”effort”
title=”How difficult was this lesson?”
enableIntensity={true}
layout=”vertical”
size=”small”
onRatingChange={(rating, intensity, scale) => {
updateProgress({
lessonId: lessonId,
difficulty: rating,
confidenceLevel: intensity
});
}}
/>
🔧 Troubleshooting
Common Issues
⚠️ Component not rendering emojis properly
Solution: Ensure your system/browser supports emoji rendering. Some older browsers may show boxes instead of emojis.
⚠️ Styles not applying correctly
Solution: Make sure Tailwind CSS is properly installed and configured in your project. The component relies on Tailwind classes.
⚠️ onClick/onRatingChange not firing
Solution: Check that you’re passing the callback function correctly and that it’s not being overridden by parent event handlers.
⚠️ Intensity levels not showing
Solution: Ensure enableIntensity={true} is set and that you have selected an emoji first. Intensity levels only appear after selection.
Performance Considerations
- Debounce rapid clicks: If users click rapidly, consider debouncing the onRatingChange callback
- Memoization: For lists of EmojiFeedback components, consider using React.memo
- Bundle size: The component is ~15KB minified, suitable for most applications
📚 API Reference
EmojiFeedback Component
interface EmojiFeedbackProps {
scale?: ‘happiness’ | ‘satisfaction’ | ‘effort’ | ‘custom’ | CustomScale;
emojis?: string[];
labels?: string[];
title?: string;
size?: ‘small’ | ‘medium’ | ‘large’;
layout?: ‘horizontal’ | ‘vertical’;
enableIntensity?: boolean;
showLabels?: boolean;
onRatingChange?: (rating: number, intensity: number | null, scale: Scale) => void;
initialRating?: number;
initialIntensity?: number;
}
interface CustomScale {
emojis: string[];
labels: string[];
name: string;
}
interface Scale {
emojis: string[];
labels: string[];
name: string;
}
Callback Parameters
| Parameter | Type | Description |
|---|---|---|
| rating | number | Selected rating index (0-4) |
| intensity | number | null | Intensity level (1-3) if enabled, null otherwise |
| scale | Scale | Scale object with emojis, labels, and name |
Demo Component
import { EmojiFeedbackDemo } from ‘@evaficy/react-emoji-feedback’;
// Renders a comprehensive demo with all features
<EmojiFeedbackDemo />
💡 Pro Tip: Use the EmojiFeedbackDemo component during development to test all features and see implementation examples!
