Skip to content

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

License

Notifications You must be signed in to change notification settings

cawfree/react-native-segmented-text-input

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

36 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

About

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

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published