# react-native-chip

> React navite component to represent a list with different functionalities on a chip view base on react-native-chips

Latest version **3.1.0** (published 2023-04-11) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-native-chip
pnpm add react-native-chip
yarn add react-native-chip
bun add react-native-chip
```

## 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 | 3.1.0 |
| Published | 2023-04-11 |
| First published | 2018-12-18 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 16.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 5 |
| Author | Alexis Valenciano |
| Maintainers | allexxis |
| Keywords | react-native-chip, react-native-chips, react-native, removable-chips, seletable-chips, chips, array, tags, select, delete |

## Links

- npm: https://www.npmjs.com/package/react-native-chip
- Repository: https://github.com/allexxis/react-native-chip
- Homepage: https://github.com/allexxis/react-native-chip#readme
- Issues: https://github.com/allexxis/react-native-chip/issues
- npm.io page: https://npm.io/package/react-native-chip

## Alternatives

- [@lexical/table](https://npm.io/package/@lexical/table.md) — 3.0M weekly downloads
- [mantine-datatable](https://npm.io/package/mantine-datatable.md) — 98.2K weekly downloads
- [react-native-collapsible-tab-view](https://npm.io/package/react-native-collapsible-tab-view.md) — 70.6K weekly downloads
- [@handsontable/vue3](https://npm.io/package/@handsontable/vue3.md) — 16.1K weekly downloads
- [vuewordcloud](https://npm.io/package/vuewordcloud.md) — 7.2K weekly downloads

## Recent versions

- 3.1.0 (latest) — 2023-04-11
- 3.0.0 — 2022-09-27
- 2.1.8 — 2018-12-19
- 2.1.7 — 2018-12-18
- 2.1.5 — 2018-12-18
- 2.1.4 — 2018-12-18
- 2.1.3 — 2018-12-18
- 2.1.2 — 2018-12-18
- 2.1.1 — 2018-12-18
- 2.1.0 — 2018-12-18
- 2.0.0 — 2018-12-18
- 1.0.0 — 2018-12-18

## README

# React Native Chip

React navite component to represent a list with different functionalities on  a chip view base on react-native-chips

## Getting Started


`npm i react-native-chip`

## Usage

```
import RemovableChips from 'react-native-chip/RemovableChips'

<RemovableChips label="Enter item" initialChips={["Person", "Chair"]} onChangeChips={(chips) => console.log(chips)} alertRequired={true}/>

import SelectableChips from 'react-native-chip/SelectableChips'

<SelectableChips initialChips={["Person", "Chair","Coma","Dog"]} onChangeChips={(chips) => console.log(chips)} alertRequired={false}/>
```

## Properties RemovableChips
 name                 | description                                 | type     | default
:-------------------- |:------------------------------------------- |:-------- |:------------------
 label            | Placeholder for the Text input                     | String    | 'Enter Item'
initialChips            | Initial Chips to be present                     | Array    | -
onChangeChips            | To get the value of chips in array                     | Function    | -
alertRequired            | To trigger alert on adding and removing chips                     | Boolean    | false
chipStyle            | Changing the style of chip elements                    | Style Object    | -
valueStyle            | Changing the style of the value inside the chip                    | Style Object    | -
chipCloseStyle            | Changing the x close of the chip                    | Style Object    | -
## Properties SelectableChips
 name                 | description                                 | type     | default
:-------------------- |:------------------------------------------- |:-------- |:------------------
initialChips            | Initial Chips to be present                     | Array    | -
initialSelectedChips    | Initial Selected Chips to be present            | Array    | -
onChangeChips            | To get the value of selected chips in array                     | Function    | -
alertRequired            | To trigger alert on adding and removing chips                     | Boolean    | false
chipStyle            | Changing the style of chip elements                    | Style Object    | -
valueStyle            | Changing the style of the value inside the chip                    | Style Object    | -
valueStyleSelected            | Changing the style of the value inside the chip when is selected                    | Style Object    | -
chipStyleSelected            | Changing the style of chip elements when is selected                    | Style Object    | -
## Properties BasicChip
 name                 | description                                 | type     | default
:-------------------- |:------------------------------------------- |:-------- |:------------------
initialChips            | Initial Chips to be present                     | Array    | -
alertRequired            | To trigger alert on adding and removing chips                     | Boolean    | false
chipStyle            | Changing the style of chip elements                    | Style Object    | -
valueStyle            | Changing the style of the value inside the chip                    | Style Object    | -

## Sample

![demo_removablechips](https://media.giphy.com/media/fH92y5o07dfCfSXI7o/giphy.gif)
![demo_selectablechips](https://media.giphy.com/media/74Z7F9chjbqqfeycS9/giphy.gif) 
![demo_complete](https://media.giphy.com/media/xFmyrQnOPH1Tr1IoGj/giphy.gif) 


## Contributing
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change or reach me out via email gabr.933@gmail.com if you have an idea how i can improve the component.


## License
react-native-chips is [LICENSE](LICENSE.MD) @ Alexis Valenciano

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