Chip

The RhChip is a customizable React component that creates clickable and selectable chip elements for displaying and selecting data.

Usage

Once installed, you can import the RhChip component into your React application:

copy

import {RhChip} from "@rhythm-ui/react"

Then, you can use the RhChip component in your JSX code:

copy

<div className="p-4">
  <RhChip value="Default Chip" />
</div>

Chip Pros

Name	Type	Default	Description
isSelected	boolean		Indicates if the chip is selected or not
index	number		Index value of the chip
onGroupClick	(index: number, e: React.MouseEvent) => void		OnClick functionality of a group of chips
onClose	() => void		OnClose button click functionality of a chip
onClick	() => void		OnClick button click functionality of a chip
variant	"primary" \| "secondary" \| "success" \| "warning" \| "danger"		String value representing the color variant of the chip
size	"xs" \| "sm" \| "base"	xs	String value representing the size of the chip
iconLeft	string		Icon to show before chip value, provide icon name only
iconRight	string		Icon to show after chip value, provide icon name only
value	string	chip	Text value of the chip

Clickable

The onClick prop is a function that is triggered when the chip is clicked. The isSelected prop determines whether the chip is currently selected or not. Here is an example of using both props.

copy

function Clickable() {
  const [isSelected, setIsSelected] = useState(true);
  return (
    <div className="p-4">
      <RhChip
        value={"Clickable"}
        isClickable
        isSelected={isSelected}
        onClick={() => setIsSelected(!isSelected)}
      />
    </div>
  );
}

Prepend Icon

The iconLeft prop is a string representing the name of the icon to be displayed on the left side of the chip.

copy

<div className="p-4">
  <RhChip value="Default" iconLeft="ri:home-wifi-line" size="sm" />
</div>

Close options

The close prop is a boolean representing the close icon displayed on the right side of the chip. And we can make access close prop in the onClose event handler.

copy

<div className="p-4">
  <RhChip close onClose={() => {}} />
</div>

Size

The size prop is used to set the size of the chip. It can be one of the following strings: xs, sm, or base.

copy

<div className="flex justify-around items-center p-4">
  <RhChip size="xs" />
  <RhChip size="sm" />
  <RhChip size="base" />
</div>

Variant

The variant prop is used to set the color of the chip. It can be one of the following strings: primary, secondary, success, warning, or danger.

copy

<div className="flex justify-around items-center p-4">
  <RhChip size="sm" variant="primary" />
  <RhChip size="sm" variant="secondary" />
  <RhChip size="sm" variant="success" />
  <RhChip size="sm" variant="warning" />
  <RhChip size="sm" variant="danger" />
</div>

Custom

By using the RhChip component with different props, we can create custom chips that have unique colors, sizes, icons, and behavior when clicked. These chips can be tailored to meet the specific design and functionality.

copy

<div className={"flex justify-around items-center p-4"}>
  <RhChip
    size="xs"
    className="border justify-between px-1"
    close
    variant="primary"
    outline
    iconLeft="ri:home-wifi-line"
    isSelected
    isClickable
  >
    This is a children
  </RhChip>
  <RhChip size="sm" close value="RhChip" iconLeft="ri:home-wifi-line" />
</div>