Socket
Socket
Sign inDemoInstall

react-native-autocomplete-tags

Package Overview
Dependencies
0
Maintainers
1
Versions
2
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-native-autocomplete-tags

Autocomplete text input with tags


Version published
Maintainers
1
Weekly downloads
304
decreased by-5.88%

Weekly downloads

Readme

Source

react-native-autocomplete-tags

A quick and easy solutions for projects that need an input with both autocomplete and tags

Features

  • custom tag and suggestions components
  • separate extractors for tags and for suggestions
  • easy to integrate and use
  • configurable

What's new in version 2?

  • no more mandatory controlled TextInput (although you still can if you want)
  • TypeScript support!
  • no more tag/suggestion styles - if you need custom styles, use renderTag or renderSuggestion instead

Installation

yarn add react-native-autocomplete-tags

or

npm install react-native-autocomplete-tags --save

Dependency

Requires RN >= 0.63 If using RN < 0.63, use v1 instead.

Useage

Also see the demo projects

const suggestions = ['apple', 'orange', 'banana', 'kiwi'];

const SimpleExample = () => {
  const [tags, setTags] = useState<string[]>([]);

  const labelExtractor = (tag: string) => tag;

  return (
    <AutocompleteTags
      tags={tags}
      suggestions={suggestions}
      onChangeTags={setTags}
      labelExtractor={labelExtractor}
    />
  );
};

export default SimpleExample;

Props

ProptypeDescriptionrequireddefault
tagsTag[]The current tags to be renderedyes
labelExtractor(tag: Tag) => stringDetermines what property of tags is displayedyes
onChangeTags(newTags: Tag[]) => voidcalled when tags change (i.e. by deleting), should be used to set tagsyes
suggestionsSuggestion[]All possible suggestionsno[]
suggestionExtractor(suggestion: Suggestion) => stringdetermines which property of suggestions is displayednouses labelExtractor
onSuggestionPress(suggestion: Suggestion) => voidcalled when suggestion is pressednocalls onChangeTags with [...tags, pressedSuggestion]
onTagPress(tag: Tag) => voidcalled when tag is pressednocalls onChangeTags with the pressed tag removed
renderSuggestion(suggestion: Suggestion, onPress: (tag: Suggestion) => void) => Elementrenders a custom suggestion componentno
renderTag(tag: Tag, onPress: (tag: Tag) => void) => Elementrenders a custom tag componentno
filterSuggestions(text: string) => Suggestion[]filters suggestions based on users text inputno
inputPropsTextInput propsany additional props for TextInputno
flatListPropsFlatList propsany additional props for FlatListno
allowCustomTagsbooleanwhether or not to allow the user to create a Tag that doesn't come from suggestionsnotrue
parseCharsstring[]an array of characters that should trigger a new tag and clear the TextInputno[',', ' ', ';', '\n']
onAddNewTag(userInput: string) => voidcalled when the user types a character in parseCharsnocalls onChangeTags with [...tags, userInputText]

Style Props

No style props are required.

PropDescription
containerStylestyle for the outer-most View that houses both the tagContainer and suggestion list
tagContainerStyleContainer for the tags and the TextInput
inputStyleApplied to the TextInput directly
flatListStyleApplied to the FlatList which renders suggestions

Contributing

PRs and issues welcome!

Keywords

FAQs

Last updated on 25 Sep 2020

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc