https://github.com/bienfaitshm/react-native-input-tags
tags input
https://github.com/bienfaitshm/react-native-input-tags
react react-native tag-input tags topic-input
Last synced: 3 months ago
JSON representation
tags input
- Host: GitHub
- URL: https://github.com/bienfaitshm/react-native-input-tags
- Owner: bienfaitshm
- License: mit
- Created: 2023-10-11T18:14:52.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-10-12T12:17:06.000Z (over 2 years ago)
- Last Synced: 2025-03-18T23:48:18.521Z (10 months ago)
- Topics: react, react-native, tag-input, tags, topic-input
- Language: TypeScript
- Homepage:
- Size: 180 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-native-input-tags
[](https://travis-ci.org/peterp/react-native-input-tags)
[](https://www.npmjs.com/package/react-native-input-tags)
[](https://badge.fury.io/js/react-native-input-tags)
This project is inspired by [react-native-tags](https://www.npmjs.com/package/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-input-tags
```
```terminal
yarn add react-native-input-tags
```
## Usage
```tsx
import { Button, StyleSheet, Text, TextInput, View } from 'react-native';
import InputTag, { useInputTag } from 'react-native-input-tags';
export default function App() {
const inputTag = useInputTag();
return (
#Tags:
{
console.log(inputTag.current?.getTags());
}}
/>
);
}
```
### `useInputTag`
Is ref object,
useInputTag allows you to have access to inputTag values
```tsx
const inputTag = useInputTag();
// get all tags inputed
inputTag.current?.getTags();
```
| values | Description |
| ------- | ---------------------------------------- |
| getTags | function return list of all tags inputed |
## 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 | the tag item { id:string , name:string } |
| onPress | callback when the chip or tag is cliked for deleting |
| onPress | callback when the chip or tag is cliked for pressing |
```tsx
//custom render tag
{
return (
{tag.name}
);
}}
/>
```
### `textInputComponent`
If you would like to add new functionality or modify the way that the Textinput are
rendered then pass in a textInputComponent prop.
| PropName | Description |
| ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| value | the tag string value input |
| onChangeText | Callback that is called when the text input's text changes. Changed text is passed as an argument to the callback handler. |
| onKeyPress | Callback that is called when a key is pressed. This will be called with { nativeEvent: { key: keyValue } } where keyValue is 'Enter' or 'Backspace' for respective keys and the typed-in character otherwise including ' ' for space. |
Fires before onChange callbacks. Note: on Android only the inputs from soft keyboard are handled, not the hardware keyboard inputs. |
| onSubmitEditing | Callback that is called when the text input's submit button is pressed. |
| style | Text style |
```tsx
import { TextInput } from 'react-native';
//custom text input
{
return ;
}}
/>;
```
## Props
| PropName | Description | Default |
| ------------------ | ----------------------------------------------------------------------- | --------------- |
| initialValue | The input element's text | |
| initialTags | intial tags eg.`[{id:"yuf", name:"reactjs"}]` | [] |
| createTagOnString | Triggers new tag creation | [",", ".", " "] |
| handlerPressTag | function call when the tag is pressed `function handlerPressTag(tag){}` | undenfied |
| textInputComponent | render TextInput | |
| renderTag | Manage the rendering of your own `Tag` | |