All Projects → cawfree → React Native Segmented Text Input

cawfree / React Native Segmented Text Input

Licence: mit
A wickedly customizable <TextInput /> for React Native. Useful for tags, spellchecking, whatever.

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to React Native Segmented Text Input

mention-hashtag
Extract mentions (@mention) or hashtags (#hashtag) from any text
Stars: ✭ 16 (-84.62%)
Mutual labels:  twitter, regexp
ember-tag-input
Simple Ember addon for entering tags
Stars: ✭ 18 (-82.69%)
Mutual labels:  input, tag
Tags Input
🔖 <input type="tags"> like magic
Stars: ✭ 312 (+200%)
Mutual labels:  tag, input
tag-picker
Better tags input interaction with JavaScript.
Stars: ✭ 27 (-74.04%)
Mutual labels:  input, tag
React Input Tags
React component for tagging inputs.
Stars: ✭ 10 (-90.38%)
Mutual labels:  tag, input
Tweetable Polyglot Png
Pack up to 3MB of data into a tweetable PNG polyglot file.
Stars: ✭ 299 (+187.5%)
Mutual labels:  twitter
Suohai
Audio input/output source lock/switcher for macOS.
Stars: ✭ 100 (-3.85%)
Mutual labels:  input
Kafka Connect Twitter
Kafka Connect connector to stream data in real time from Twitter.
Stars: ✭ 94 (-9.62%)
Mutual labels:  twitter
Swipe
A plugin for Unreal Engine 4 that exposes swipes on mobile devices as events in blueprint.
Stars: ✭ 91 (-12.5%)
Mutual labels:  input
Vue Twitter Client
Twitter client created with Vue.js + Electron
Stars: ✭ 103 (-0.96%)
Mutual labels:  twitter
Learning Social Media Analytics With R
This repository contains code and bonus content which will be added from time to time for the book "Learning Social Media Analytics with R" by Packt
Stars: ✭ 102 (-1.92%)
Mutual labels:  twitter
Covid Twitter Bert
Pretrained BERT model for analysing COVID-19 Twitter data
Stars: ✭ 101 (-2.88%)
Mutual labels:  twitter
Regexpp
The regular expression parser for ECMAScript.
Stars: ✭ 97 (-6.73%)
Mutual labels:  regexp
Customalertviewdialogue
Custom AlertView Dialogue is the world's most advanced alert view library. Custom AlertView Dialogue includes simple message popups, confirmation alerts, selector popups, action sheet bottom menus, and input/feedback contact forms.
Stars: ✭ 100 (-3.85%)
Mutual labels:  input
Socialauthhelper
Easy social network authorization for Android. Supports Facebook, Twitter, Instagram, Google+, Vkontakte. Made by Stfalcon
Stars: ✭ 94 (-9.62%)
Mutual labels:  twitter
Stock Market Prediction Web App Using Machine Learning And Sentiment Analysis
Stock Market Prediction Web App based on Machine Learning and Sentiment Analysis of Tweets (API keys included in code). The front end of the Web App is based on Flask and Wordpress. The App forecasts stock prices of the next seven days for any given stock under NASDAQ or NSE as input by the user. Predictions are made using three algorithms: ARIMA, LSTM, Linear Regression. The Web App combines the predicted prices of the next seven days with the sentiment analysis of tweets to give recommendation whether the price is going to rise or fall
Stars: ✭ 101 (-2.88%)
Mutual labels:  twitter
Twitter Sentiment Analysis
This script can tell you the sentiments of people regarding to any events happening in the world by analyzing tweets related to that event
Stars: ✭ 94 (-9.62%)
Mutual labels:  twitter
Mention
Twitter like mentions and #hashtags parser for Go(Golang)
Stars: ✭ 99 (-4.81%)
Mutual labels:  twitter
React Input Enhancements
Set of enhancements for input control
Stars: ✭ 1,375 (+1222.12%)
Mutual labels:  input
Sarcasmdetection
Sarcasm detection on tweets using neural network
Stars: ✭ 99 (-4.81%)
Mutual labels:  twitter

react-native-segmented-text-input

A wickedly customizable <TextInput /> for React Native. Useful for tags, spellchecking, whatever.

🚀 Getting Started

Using npm:

npm install --save react-native-segmented-text-input

✍️ Usage

import SegmentedTextInput from "react-native-segmented-text-input";

export default () => {
  const [value, onChange] = useState(['', []]);
  return (
    <SegmentedTextInput
      value={value}
      onChange={onChange}
    />
  );
};

To initialize the view, you can supply the input text and corresponding pattern:

import { PATTERN_MENTION } from "react-native-segmented-text-input";
const [value, onChange] = useState(['', [["@cawfree", PATTERN_MENTION]]]);

🤔 Prop Types

Prop Name Type Struc Required Default Description
value [string, [string, matchingRegExp]] false ['', []] The current state of the input. Array of the string being typed, and array of previous regexp matches relating to match string.
onChange ([string, [[string, matchingRegExp]]) => undefined false Promise.resolve Called when the segments or input text has changed.
patterns {[regExpString]: React.ElementType, ...} false {["(^|\s)@[a-z\d-]+"] => Mention Maps a to a React component to render them. Is passed an onRequestDelete prop used to delete the segment.
placeholder string false "Add some @mentions..." Placeholder for the text input.
disabled boolean false false Prevent the user from typing.
textStyle styles false {fontSize: 28} Style the text. (Inherited for both Text and InputText).
textInputStyle styles false {} Specific additional styling for the TextInput.
invalidTextStyle styles false {color: "red"} Specific additional styling for the TextInput when in error.
segmentContainerStyle styles false {} Additional styling for segment container.
suggestionsContainerStyle styles false {} Styling to apply to the container of the Suggestions.
shouldRenderInvalid currentTextString => boolean false str => !str.startsWith("@") Determines whether a particular string should be rendered using invalidTextStyle.
max number false 3 Maximum number of segments.
onSuggest currentTextString => Promise([any]) false Promise.resolve([]) A call which is made when the user is mid-typing. The string is passed to ask the parent to provide possible suggestions.
minSuggestionLength number false 2 The minimum number of characters a user should have typed before attempting to make a suggestion.
debounce number false 250 The number of milliseconds to throttle attempts at querying for a suggestion.
renderSuggestions ({suggestions:[any], pickSuggestion: () => undefined, loadingSuggestions: boolean}) => false () => Used to render suggestions. This function must understand the specific format of returned suggestion data.

✌️ Licence

MIT

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].