Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/peterp/react-native-tags
Tag input component for React Native
https://github.com/peterp/react-native-tags
react-native tags
Last synced: about 2 months ago
JSON representation
Tag input component for React Native
- Host: GitHub
- URL: https://github.com/peterp/react-native-tags
- Owner: peterp
- License: mit
- Archived: true
- Created: 2016-09-15T18:52:11.000Z (about 8 years ago)
- Default Branch: main
- Last Pushed: 2023-03-05T11:47:25.000Z (over 1 year ago)
- Last Synced: 2024-07-16T17:38:15.270Z (2 months ago)
- Topics: react-native, tags
- Language: JavaScript
- Homepage:
- Size: 1.97 MB
- Stars: 288
- Watchers: 6
- Forks: 74
- Open Issues: 20
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome - react-native-tags - Tag input component for React Native (JavaScript)
README
# React-Native-Tags
[](https://travis-ci.org/peterp/react-native-tags)
[](https://www.npmjs.com/package/react-native-tags)
[](https://badge.fury.io/js/react-native-tags)
A React Native component that allows you to input text and formats the text
into a tag when a space or comma is entered. Tapping on the tag will remove it.
## Installation
```terminal
npm install --save react-native-tags
```
```terminal
yarn add react-native-tags
```
## Usage
```jsx
import React from "react";
import { TouchableOpacity, Text } from "react-native";
import Tags from "react-native-tags";
const MyTagInput = () => (
console.log(tags)}
onTagPress={(index, tagLabel, event, deleted) =>
console.log(index, tagLabel, event, deleted ? "deleted" : "not deleted")
}
containerStyle={{ justifyContent: "center" }}
inputStyle={{ backgroundColor: "white" }}
renderTag={({ tag, index, onPress, deleteTagOnPress, readonly }) => (
{tag}
)}
/>
);
```
## Render Props
### `renderTag`
If you would like to add new functionality or modify the way that the tags are
rendered then pass in a renderTag prop.
| PropName | Description |
| -------- | ------------------------------------------------------------ |
| tag | text of the tag |
| index | position in the array of tags |
| onPress | Removes the tag if `deleteTagsOnPress` and readonly is false |
## Props
| PropName | Description | Default |
| ----------------- | ---------------------------------------------------------------------------------------------- | --------------- |
| initialText | The input element's text | |
| textInputProps | [forward props to the textInput](https://facebook.github.io/react-native/docs/textinput#props) | |
| initialTags | ['the', 'initial', 'tags'] | |
| createTagOnString | Triggers new tag creation | [",", ".", " "] |
| onChangeTags | Fires when tags are added or removed | |
| maxNumberOfTags | The max number of tags that can be entered | infinity |
| onTagPress | Fires when tags are pressed | |
| readonly | Tags cannot be modified | false |
| deleteTagOnPress | Remove the tag when pressed | true |
| renderTag | Manage the rendering of your own `Tag` | |
## Style modification props
| PropName | Description | Default |
| ------------------- | ------------------------------ | ------- |
| style | Style (`containerStyle` alias) | |
| containerStyle | Style | |
| inputContainerStyle | Style | |
| inputStyle | Style | |
| tagContainerStyle | Style | |
| tagTextStyle | Style | |