React Pill - Microsite

✨ Features

Dynamic pills via simple data structure
Customize background-color and look-n-feel
Customizable pills with labels, icons, and close buttons.
Rounded or default rectangular styles.
Easy-to-use
Type safe

📦 Installation

npm install react-pill

Or with Yarn:

yarn add react-pill

📖 Usage


                    
import React from "react";
import Pill from "react-pill";

const App = () => {
    const data = [
        { label: "Tab 1", bgcolor: "#ffcccb" },
        { label: "Tab 2", bgcolor: "#b0e57c" },
        { label: "Tab 3", bgcolor: "#87ceeb", icon: "" },
    ];

    const handleSelect = (event, index) => {
        console.log(`Selected Pill: ${index}`);
    };

    const handleClose = (index) => {
        console.log(`Closed Pill: ${index}`);
    };
    return (
        <>
        <Pill
            data={data}
            onSelect={handleSelect}
            onClose={handleClose}
            rounded={true}
            containerClassName="pill-container"
            pillClassName="custom-pill"
        />
        
    );
};

export default App;

🎨 Styling

You can style the pills using your own CSS:


.defaultPill {
    padding: 10px;
    border: none;
    cursor: pointer;
}
.rounded {
    border-radius: 20px;
}
.closeButton {
    background: none;
    border: none;
    cursor: pointer;
    margin-left: 10px;
}