# react-native-segmented-text-input
> A wickedly customizable for React Native. Useful for tags, spellchecking, whatever.
Latest version **0.0.1-alpha.12** (published 2020-12-01) · MIT license · 0 weekly downloads
## Install
```sh
npm install react-native-segmented-text-input
pnpm add react-native-segmented-text-input
yarn add react-native-segmented-text-input
bun add react-native-segmented-text-input
```
## Health
**Score 15/100 (F)** — status: abandoned.
Positive: no vulnerabilities.
Warnings: low downloads; no types; no esm support; pre 1.0.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 0.0.1-alpha.12 |
| Published | 2020-12-01 |
| First published | 2020-07-18 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 29.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 141 |
| Author | Alex Thomas |
| Maintainers | cawfree |
| Keywords | react-native, tag, input, twitter, mention, regexp, highlighter |
## Links
- npm: https://www.npmjs.com/package/react-native-segmented-text-input
- Repository: https://github.com/cawfree/react-native-segmented-text-input
- npm.io page: https://npm.io/package/react-native-segmented-text-input
## Dependencies (3)
- [lodash](https://npm.io/package/lodash.md) ^4.17.19
- [type-check](https://npm.io/package/type-check.md) ^0.4.0
- [use-debounce](https://npm.io/package/use-debounce.md) ^5.1.0
## Alternatives
- [@lexical/table](https://npm.io/package/@lexical/table.md) — 3.0M weekly downloads
- [mantine-datatable](https://npm.io/package/mantine-datatable.md) — 98.2K weekly downloads
- [react-native-collapsible-tab-view](https://npm.io/package/react-native-collapsible-tab-view.md) — 70.6K weekly downloads
- [@handsontable/vue3](https://npm.io/package/@handsontable/vue3.md) — 16.1K weekly downloads
- [vuewordcloud](https://npm.io/package/vuewordcloud.md) — 7.2K weekly downloads
## Recent versions
- 0.0.1-alpha.12 (latest) — 2020-12-01
- 0.0.1-alpha.11 — 2020-12-01
- 0.0.1-alpha.10 — 2020-11-12
- 0.0.1-alpha.9 — 2020-08-26
- 0.0.1-alpha.8 — 2020-08-21
- 0.0.1-alpha.7 — 2020-07-20
- 0.0.1-alpha.6 — 2020-07-20
- 0.0.1-alpha.5 — 2020-07-18
- 0.0.1-alpha.4 — 2020-07-18
- 0.0.1-alpha.2 — 2020-07-18
- 0.0.1-alpha.1 — 2020-07-18
- 0.0.1-alpha.0 — 2020-07-18
## README
# react-native-segmented-text-input
A wickedly customizable <TextInput /> for React Native. Useful for tags, spellchecking, whatever.
## 🚀 Getting Started
Using [npm](https://www.npmjs.com/):
```bash
npm install --save react-native-segmented-text-input
```
## ✍️ Usage
```javascript
import SegmentedTextInput from "react-native-segmented-text-input";
export default () => {
const [value, onChange] = useState(['', []]);
return (
);
};
```
To initialize the view, you can supply the input text and corresponding pattern:
```javascript
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**](./LICENSE.md)
---
_Source: https://npm.io/package/react-native-segmented-text-input · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._