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.

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