Rn-chips NPM | npm.io

rn-chips

A customizable React Native component for creating chip input functionality.

Installation

npm install rn-chips

or

yarn add rn-chips

Usage

import ChipInput from "rn-chips";

// ...

<ChipInput
  initialChips={["React", "Native"]}
  onChangeChips={(chips) => console.log(chips)}
/>;

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

import React from "react";
import { View } from "react-native";
import ChipInput from "rn-chips";

export default function App() {
  const handleChipsChange = (chips) => {
    console.log("Current chips:", chips);
  };

  return (
    <View style={{ padding: 20 }}>
      <ChipInput
        initialChips={["React", "Native"]}
        onChangeChips={handleChipsChange}
        alertRequired={true}
        inputPlaceholder="Add a technology..."
        chipStyle={{ backgroundColor: "#e0e0e0" }}
        chipTextStyle={{ color: "#333" }}
        inputStyle={{ borderColor: "#ccc" }}
      />
    </View>
  );
}

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