peterp / React Native Tags
Licence: mit
Tag input component for React Native
Stars: ✭ 175
Programming Languages
javascript
184084 projects - #8 most used programming language
Labels
Projects that are alternatives of or similar to React Native Tags
Redmine tagging
Add simple tagging support to Redmine Issues/Wiki pages
Stars: ✭ 111 (-36.57%)
Mutual labels: tags
Craft Seomatic
SEOmatic facilitates modern SEO best practices & implementation for Craft CMS 3. It is a turnkey SEO system that is comprehensive, powerful, and flexible.
Stars: ✭ 135 (-22.86%)
Mutual labels: tags
Ttgtagcollectionview
Useful for showing text or custom view tags in a vertical or horizontal scrollable view and support Autolayout at the same time. It is highly customizable that most features of the text tag can be configured. 标签流显示控件,同时支持文字或自定义View
Stars: ✭ 1,626 (+829.14%)
Mutual labels: tags
Betterdiscord Plugins
Assorted small plugins for BetterDiscord
Stars: ✭ 79 (-54.86%)
Mutual labels: tags
React Selectrix
A beautiful, materialized and flexible React Select control
Stars: ✭ 166 (-5.14%)
Mutual labels: tags
Tags
A Tagging package that easily allows you to add tags to your Eloquent models.
Stars: ✭ 134 (-23.43%)
Mutual labels: tags
Hydrus Presets And Scripts
collection of presets and scripts for Hydrus
Stars: ✭ 101 (-42.29%)
Mutual labels: tags
Tagify
🔖 lightweight, efficient Tags input component in Vanilla JS / React / Angular / Vue
Stars: ✭ 2,305 (+1217.14%)
Mutual labels: tags
Hypertag
Knowledge Management for Humans using Machine Learning & Tags
Stars: ✭ 116 (-33.71%)
Mutual labels: tags
Protoc Gen Gotag
Add custom struct tags to protobuf generated structs
Stars: ✭ 97 (-44.57%)
Mutual labels: tags
React Tagsinput
Highly customizable React component for inputing tags.
Stars: ✭ 1,241 (+609.14%)
Mutual labels: tags
Open Graph
Library that assists in building Open Graph meta tags
Stars: ✭ 112 (-36%)
Mutual labels: tags
Laravel Meta
HTML Meta Tags management package available for for Laravel 5.*
Stars: ✭ 150 (-14.29%)
Mutual labels: tags
Svelte Tags Input
Svelte tags input is a component to use with Svelte and easily enter tags and customize some options
Stars: ✭ 123 (-29.71%)
Mutual labels: tags
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
npm install --save react-native-tags
yarn add react-native-tags
Usage
import React from "react";
import { TouchableOpacity, Text } from "react-native";
import Tags from "react-native-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>
)}
/>
);
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 | |
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 |
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].