Quick Feedback

Renders a feedback component with up and down buttons. It shows feedback text and an undo button when a choice is made. It uses animations for smooth transitions. Use it when needing real-time user feedback in an interface.

byWatermelon Corp from Watermelon

Installation

terminal

pnpm dlx layro-cli add @watermeloncorp/quick-feedback

npx layro-cli add @watermeloncorp/quick-feedback

npx layro-cli add @watermeloncorp/quick-feedback

bunx layro-cli add @watermeloncorp/quick-feedback

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

'use client';

import { type FC, useState } from 'react';
import {
  motion,
  AnimatePresence,
  type Transition,
  MotionConfig,
  LayoutGroup,
} from 'motion/react';
import { Undo2 } from 'lucide-react';
import { FaThumbsDown, FaThumbsUp } from 'react-icons/fa6';
import useMeasure from 'react-use-measure';
import { cn } from '@/lib/utils';