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