Custom Tab Components for React Applications – React Pill

Description:

React Pill is a lightweight React component for creating sleek, customizable pill-style tabs ideal for navigation, tags, or item selection.

It can help developers create clean, modern interfaces with customizable pills that support labels, icons, and interactive elements.

Features

• ✨ Customizable Appearance: Control pill labels, background colors, and add icons for visual clarity.
• 🎨 Flexible Styling: Apply rounded corners or maintain a standard rectangular shape. Customize styles further with CSS.
• 💅 Customizable Icons & Close Buttons: Include icons within pills and add close buttons for enhanced interactivity.
• ⚙️ Easy Integration: Simple installation and a straightforward API make it easy to incorporate into your project.
• 🔒 Type Safe: Benefit from TypeScript definitions for improved code reliability and maintainability.

Use Cases

• Navigation Tabs: Replace traditional tabs with interactive pill-shaped navigation elements, providing a modern and engaging user experience. Imagine a product comparison page where users can switch between different product specifications using pills.
• Tagging Systems: Implement a tagging system allowing users to add and remove tags (represented as pills) to categorize content. Think of a blog post where users can select relevant topics using tag pills.
• Filtering and Faceting: Use pills to represent filter criteria in search interfaces or e-commerce platforms. Users can select multiple pills to refine search results based on specific attributes.
• Item Selection: Create interfaces where users can select multiple items from a list, with each selected item represented by a pill. This could be used in a team management tool where users select members for a project.
• Status Indicators: Display the status of different items or processes using color-coded pills, providing a quick visual overview. For instance, in a project management dashboard, tasks could have “In Progress,” “Completed,” or “Blocked” status indicated by differently colored pills.

Installation Guide

Install React Pill using npm:

npm install react-pill

Or with Yarn:

yarn add react-pill

Usage Guide

Once installed, you can integrate the React Pill component into your project with a simple setup. Here’s an example:

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}
        containerClassName="pill-container"
        pillClassName="custom-pill"
      />
    </div>
  );
};
export default App;

• data Prop: Defines the label, background color, and optional icon for each pill.
• onSelect Prop: Triggered when a pill is selected, allowing you to capture the selected pill’s index.
• onClose Prop: Triggered when a pill is closed, ideal for tag or tab removal.
• rounded Prop: Adds rounded corners to the pills for a modern design.
• Custom Styling: You can apply your own CSS classes to customize the appearance of the pills.

Styling

React Pill comes with default styling classes, but you can easily override these by creating a custom Pill.css. Some key classes include:

• .defaultPill: Basic pill styling.
• .rounded: Adds rounded corners.
• .closeButton: Styles the close button.
• .iconContainer: Contains the optional icons within the pill.

Example of custom styles:

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

FAQs

Q: Can I use custom icons instead of text or emoji?
A: Yes, the icon property accepts custom components, including SVG icons or icon fonts.

Q: Does React Pill support keyboard navigation?
A: Basic keyboard support is included. Arrow keys navigate between pills, and Enter triggers selection.

Q: Is server-side rendering supported?
A: React Pill works with SSR frameworks like Next.js without additional configuration.

Preview