React Pill

React Pill is a customizable pill-style component that you can use to create tab-like elements in your React application. It is simple, lightweight, and easy to integrate, providing a clean and modern look for navigation or item selection.

✨ Features

• Customizable pills with support for labels, icons, and close buttons.
• Rounded or default rectangular styles.
• Easy-to-use API for on-click and close actions.
• Type safe
• keyboard accessibile

Demo

Demo

🚀 Getting Started

Installation

You can install react-pill via NPM:

npm install react-pill

Or with Yarn:

yarn add react-pill

🛠️ Usage

Here's how you can use the Pill component in your React project:

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 (
    <div>
      <Pill
        data={data}
        onSelect={handleSelect}
        onClose={handleClose}
        rounded={true}
        wrapperClassName="pill-container"
        itemClassName="custom-pill"
      />
    </div>
  );
};

export default App;

Props

Prop	Type	Description
data	array	Array of pill data objects, each with properties label, bgcolor, and icon.
onClose	function	Function called when the close button is clicked. Receives the index of the pill.
onSelect	function	Function called when a pill is selected. Receives the event and the index of the pill.
rounded	boolean	If true, pills will have rounded corners.
itemClassName	string	Custom class for individual pills.
wrapperClassName	string	Custom class for the pill container.

Example

In the example above:

• The data prop provides the labels, colors, and optional icons for each pill.
• onSelect and onClose props handle user interactions.
• You can customize the style by providing custom CSS classes.

🖌️ Styling

You can style the pills using your own CSS. Here are the default classes you can override:

• .defaultPill: The base pill styling.
• .rounded: Adds rounded corners.
• .closeButton: Styles the close button.
• .iconContainer: Wraps the icon inside the pill.

You can create your own Pill.css to modify the appearance as desired:

.defaultPill {
  padding: 10px;
  border: none;
  cursor: pointer;
}

.rounded {
  border-radius: 20px;
}

.closeButton {
  background: none;
  border: none;
  cursor: pointer;
  margin-left: 10px;
}

🔧 Build & Development

To build the package, run:

npm run build

To run the tests:

npm test

🤝 Contributing

Contributions are welcome! If you have ideas or suggestions, feel free to open an issue or create a pull request.

📄 License

MIT License. Feel free to use, modify, and share it!