Skip to content
This repository was archived by the owner on Jun 13, 2023. It is now read-only.

Commit 92da8a6

Browse files
committed
Add docs for new props.
1 parent 5261915 commit 92da8a6

File tree

1 file changed

+40
-17
lines changed

1 file changed

+40
-17
lines changed

README.md

Lines changed: 40 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ yarn add react-native-tags
2323

2424
```jsx
2525
import React from "react";
26+
import { TouchableOpacity, View } from "react-native"
2627
import Tags from "react-native-tags";
2728

2829
const UselessComponent = () => (
@@ -38,26 +39,48 @@ const UselessComponent = () => (
3839
}
3940
containerStyle={{ justifyContent: "center" }}
4041
inputStyle={{ backgroundColor: "white" }}
42+
renderTag={({ tag, index, onPress, deleteTagOnPress, readonly }) => (
43+
<TouchableOpacity key={`${tag}-${index}`} onPress={onPress}><Text>{tag}<Text></TouchableOpacity>
44+
)}
4145
/>
4246
);
4347
```
4448

49+
## Render Props
50+
51+
### `renderTag`
52+
53+
If you would like to add new functionality or modify the way that the tags are
54+
rendered then pass in a renderTag prop.
55+
56+
| PropName | Description |
57+
| -------- | ------------------------------------------------------------ |
58+
| tag | text of the tag |
59+
| index | position in the array of tags |
60+
| onPress | Removes the tag if `deleteTagsOnPress` and readonly is false |
61+
4562
## Props
4663

47-
| PropName | Description | Default |
48-
| ------------------- | ---------------------------------------------------------------------------------------------- | --------------- |
49-
| initialText | The input element's text | |
50-
| textInputProps | [forward props to the textInput](https://facebook.github.io/react-native/docs/textinput#props) | |
51-
| initialTags | ['the', 'initial', 'tags'] | |
52-
| createTagOnString | Triggers new tag creation | [",", ".", " "] |
53-
| onChangeTags | Fires when tags are added or removed | |
54-
| maxNumberOfTags | The max number of tags that can be entered | infinity |
55-
| onTagPress | Fires when tags are pressed | |
56-
| readonly | Tags cannot be modified | false |
57-
| deleteTagOnPress | Remove the tag when pressed | true |
58-
| containerStyle | Style | |
59-
| style | Style (`containerStyle` alias) | |
60-
| inputContainerStyle | Style | |
61-
| inputStyle | Style | |
62-
| tagContainerStyle | Style | |
63-
| tagTextStyle | Style | |
64+
| PropName | Description | Default |
65+
| ----------------- | ---------------------------------------------------------------------------------------------- | --------------- |
66+
| initialText | The input element's text | |
67+
| textInputProps | [forward props to the textInput](https://facebook.github.io/react-native/docs/textinput#props) | |
68+
| initialTags | ['the', 'initial', 'tags'] | |
69+
| createTagOnString | Triggers new tag creation | [",", ".", " "] |
70+
| onChangeTags | Fires when tags are added or removed | |
71+
| maxNumberOfTags | The max number of tags that can be entered | infinity |
72+
| onTagPress | Fires when tags are pressed | |
73+
| readonly | Tags cannot be modified | false |
74+
| deleteTagOnPress | Remove the tag when pressed | true |
75+
| renderTag | Manage the rendering of your own `Tag` | |
76+
77+
## Style modification props
78+
79+
| PropName | Description | Default |
80+
| ------------------- | ------------------------------ | ------- |
81+
| style | Style (`containerStyle` alias) | |
82+
| containerStyle | Style | |
83+
| inputContainerStyle | Style | |
84+
| inputStyle | Style | |
85+
| tagContainerStyle | Style | |
86+
| tagTextStyle | Style | |

0 commit comments

Comments
 (0)