Skip to content

Commit

Permalink
Fix(#1): add params in textinput
Browse files Browse the repository at this point in the history
  • Loading branch information
bienfait shomari committed Oct 12, 2023
1 parent e58bdc0 commit 1237bf0
Show file tree
Hide file tree
Showing 3 changed files with 27 additions and 26 deletions.
47 changes: 22 additions & 25 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,8 @@
[![npm](https://img.shields.io/npm/dt/express.svg)](https://www.npmjs.com/package/react-native-input-tags)
[![npm version](https://badge.fury.io/js/react-native-input-tags.svg)](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.

Expand All @@ -23,31 +25,26 @@ yarn add react-native-input-tags

## Usage

```jsx
import React from 'react';
import { TouchableOpacity, Text } from 'react-native';
import Tags from 'react-native-input-tags';

const MyTagInput = () => (
<Tags
initialText="monkey"
textInputProps={{
placeholder: 'Any type of animal',
}}
initialTags={['dog', 'cat', 'chicken']}
onChangeTags={tags => 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 }) => (
<TouchableOpacity key={`${tag}-${index}`} onPress={onPress}>
<Text>{tag}</Text>
</TouchableOpacity>
)}
/>
);
```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 (
<View style={styles.container}>
<Text style={styles.title}>#Tags:</Text>
<View style={styles.separator} />
<InputTag ref={inputTag} />
<Button
title="Submit"
onPress={() => {
console.log(inputTag.current?.getTags());
}}
/>
</View>
);
}
```

## Render Props
Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{
"version": "0.1.01",
"version": "0.1.02",
"license": "MIT",
"main": "dist/index.js",
"typings": "dist/index.d.ts",
Expand Down
4 changes: 4 additions & 0 deletions src/InputTag.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@ const TagTextInput = React.forwardRef<TagTextInputRef, TagTextInputProps>(
removeTag,
addTag,
},
ref
) => {
const [tag, setTag] = React.useState<string>(initialValue);
/** text input and event process */
Expand Down Expand Up @@ -82,6 +83,9 @@ const TagTextInput = React.forwardRef<TagTextInputRef, TagTextInputProps>(
},
[tag]
);
React.useImperativeHandle(ref,()=>({

}),[])
return (
<TextInput
style={textInputStyle}
Expand Down

0 comments on commit 1237bf0

Please sign in to comment.