rn-chips

A customizable React Native component for creating chip input functionality.

Installation

1npm install rn-chips

or

1yarn add rn-chips

Usage

1import ChipInput from "rn-chips";
2
3// ...
4
5<ChipInput
6  initialChips={["React", "Native"]}
7  onChangeChips={(chips) => console.log(chips)}
8/>;

Props

Prop	Type	Default	Description
initialChips	Array	[]	Initial set of chips to display.
duplicate	Boolean	false	Allow duplicate chips if set to true.
onChangeText	Function	-	Callback function triggered when input text changes.
onChangeChips	Function	-	Callback function triggered when chips array changes. Receives the updated chips array as an argument.
alertRequired	Boolean	false	Show alerts for chip addition/deletion if set to true.
inputPlaceholder	String	"Type something..."	Placeholder text for the input field.
hideInput	Boolean	false	Hide the input field if set to true.
chipStyle	Object	-	Custom styles for the chip container.
chipTextStyle	Object	-	Custom styles for the chip text.
inputStyle	Object	-	Custom styles for the input field.
chipsContainerStyle	Object	-	Custom styles for the container holding all chips.
closeBtn	Element	-	Custom close button element for chips. (Add custom icon/button using this as emoji is used by default)
closeBtnStyle	Object	-	Custom styles for the default close button.
chipPressable	Boolean	false	Make chips pressable if set to true.
onChipPress	Function	-	Callback function triggered when a chip is pressed. Receives the index and value of the pressed chip as arguments.

Detailed Functionality

• Chip Input: Users can type text into the input field and create chips by submitting the text (e.g., pressing enter).
• Initial Chips: Set initial chips using the initialChips prop. If duplicate is false, duplicate chips will be automatically removed.
• Duplicate Handling: Control whether duplicate chips are allowed using the duplicate prop.
• Chip Removal: Chips can be removed by clicking on their close button. This action can trigger an alert if alertRequired is set to true.
• Chip Addition: New chips are added when the input loses focus or the user submits the input. This action can trigger an alert if alertRequired is set to true.
• Custom Styling: Customize the appearance of chips, input field, and the overall container using various style props.
• Hidden Input: Hide the input field using the hideInput prop, useful for displaying a static set of chips.
• Custom Close Button: Provide a custom close button element using the closeBtn prop.
• Pressable Chips: Make chips pressable using the chipPressable prop and handle press events with the onChipPress callback.
• Callbacks: Utilize onChangeText, onChangeChips, and onChipPress callbacks to handle various events and keep your app's state in sync with the component.

Example

1import React from "react";
2import { View } from "react-native";
3import ChipInput from "rn-chips";
4
5export default function App() {
6  const handleChipsChange = (chips) => {
7    console.log("Current chips:", chips);
8  };
9
10  return (
11    <View style={{ padding: 20 }}>
12      <ChipInput
13        initialChips={["React", "Native"]}
14        onChangeChips={handleChipsChange}
15        alertRequired={true}
16        inputPlaceholder="Add a technology..."
17        chipStyle={{ backgroundColor: "#e0e0e0" }}
18        chipTextStyle={{ color: "#333" }}
19        inputStyle={{ borderColor: "#ccc" }}
20      />
21    </View>
22  );
23}

This example creates a chip input with initial values, custom styling, and alerts for chip additions and deletions.

Dependencies

This package depends on:

• react-native
• rn-animated-pressable

Make sure these are installed in your project.

License

This project is licensed under the MIT License.

Authors

• @sndeshmukh00