Edit Badge

Renders an interactive badge with inline editing capabilities. Displays text, icon, and color, allowing real-time changes. Opens an editor when clicked, closing on outside click. Use for customizable badges in dashboards or forms.

byWatermelon Corp from Watermelon

Installation

terminal

pnpm dlx layro-cli add @watermeloncorp/edit-badge

npx layro-cli add @watermeloncorp/edit-badge

npx layro-cli add @watermeloncorp/edit-badge

bunx layro-cli add @watermeloncorp/edit-badge

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

Code

Demo

import React, { useState, useRef, useEffect } from 'react';
import {
  motion,
  AnimatePresence,
  MotionConfig,
  type Transition,
} from 'motion/react';
import { X, Loader2 } from 'lucide-react';
import { BiSolidPencil } from 'react-icons/bi';
import { FaCircleCheck } from 'react-icons/fa6';
import { BsDashCircleFill } from 'react-icons/bs';
import { MdTimelapse } from 'react-icons/md';
import { LuTimer } from 'react-icons/lu';
import { HiPencil } from 'react-icons/hi2';