# rn-chips

> A react native package that is flexible and customizable component for creating chip input functionality.

Latest version **1.0.3** (published 2024-08-12) · MIT license · 0 weekly downloads

## Install

```sh
npm install rn-chips
pnpm add rn-chips
yarn add rn-chips
bun add rn-chips
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.3 |
| Published | 2024-08-12 |
| First published | 2023-06-23 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 11.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Shesh Narayan Deshmukh |
| Maintainers | sheshnarayandeshmukh |
| Keywords | react-native-chips, rn-chips, react-native, chips, tags, react-native-tags, react-native-multiple-input-chip, react-native-input-chip, react-native-chip-input |

## Links

- npm: https://www.npmjs.com/package/rn-chips
- npm.io page: https://npm.io/package/rn-chips

## Recent versions

- 1.0.3 (latest) — 2024-08-12
- 1.0.2 — 2024-08-12
- 1.0.1 — 2023-06-23
- 1.0.0 — 2023-06-23

## README

# rn-chips

A customizable React Native component for creating chip input functionality.

## Installation

```bash
npm install rn-chips
```

#### or

```bash
yarn add rn-chips
```

## Usage

```javascript
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

```javascript
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](https://www.github.com/sndeshmukh00)

---
_Source: https://npm.io/package/rn-chips · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._