Removable Chip

쉬움

삭제 가능한 칩 컴포넌트

#click#javascript#removable

라이브 데모

React

TypeScript

CSS

HTML

코드

RemovableChip.tsx

import React, { useState } from 'react';

export const RemovableChip: React.FC = () => {
  const [chips, setChips] = useState(['React', 'TypeScript', 'CSS']);

  const handleRemove = (chipToRemove: string) => {
    setChips(chips.filter(chip => chip !== chipToRemove));
  };

  return (
    <div className="chip-demo-container">
      {chips.map((chip) => (
        <div key={chip} className="removable-chip">
          <span>{chip}</span>
          <button onClick={() => handleRemove(chip)}>×</button>
        </div>
      ))}
    </div>
  );
};

chips.css

.removable-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--accent-purple);
  color: white;
  border-radius: 16px;
  transition: all 0.2s ease;
}

.removable-chip:hover {
  transform: translateY(-2px);
}