JSPM

react-native-input-suggestion

1.0.02
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 4
  • Score
    100M100P100Q30295F
  • License MIT

A customizable React Native TextInput with inline suggestion, auto-complete, and swipe-to-fill or tap-to-fill functionality.

Package Exports

  • react-native-input-suggestion
  • react-native-input-suggestion/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-native-input-suggestion) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-native-input-suggestion / Suggestion Input

A customizable React Native text input component that suggests and auto-fills text from a given suggestion string. It supports drag-to-fill, tap-to-fill, and auto-suggestion with various customization options like colors, styles, and fill modes.

SuggestionInput Demo

✨ Features

  • 🔍 Real-time suggestion and auto-fill as user types.
  • 🔁 Two fill modes: textPress (tap) and textDrag (drag).
  • 🎨 Fully customizable styles and colors.
  • ⚖️ Configurable case-sensitivity.
  • 🧹 Easily integrable in any form or input field.

📦 Installation

npm install react-native-suggestion-input
# or
yarn add react-native-suggestion-input

🧹 Usage Example

import React, { useState } from 'react';
import { View } from 'react-native';
import SuggestionInput from 'react-native-suggestion-input';

const App = () => {
  const [text, setText] = useState('');

  return (
    <View style={{ padding: 20 }}>
      <SuggestionInput
        value={text}
        onChangeText={setText}
        suggestion="Ants are tiny but their bite is strong"
        inputTextColor="black"
        suggestionTextColor="gray"
        placeholder="Type here..."
        textStyle={{ fontSize: 16, fontWeight: '500' }}
        fillType="textDrag"
        caseSensitive={false}
        containerStyle={{ borderColor: '#aaa', borderWidth: 1 }}
        showFillButton={true}
        maxLength={50}
      />
    </View>
  );
};

export default App;

⚙️ Props

Prop Type Default Description
value string — The current value of the input field.
onChangeText (text: string) => void — Callback when text changes.
suggestion string — Suggestion text to match and fill.
inputTextColor string 'black' Color of the user-entered text.
suggestionTextColor string 'gray' Color of the suggestion text.
placeholder string 'Type here…' Placeholder for the input.
textStyle TextStyle — Style for the text input and suggestion.
fillType 'textPress' | 'textDrag' 'textPress' Fill mode: tap or drag to fill.
caseSensitive boolean false If true, matches suggestion case-sensitively.
containerStyle ViewStyle — Style for the outer container.
showFillButton boolean false Show a "Fill" button next to suggestion text.
...TextInputProps TextInputProps — All other native TextInput props like maxLength, keyboardType, etc.

🧠 Benefits

  • Improves data entry speed and accuracy.
  • Mimics Gmail-style tab-to-complete experience.
  • Enhances user experience with visual feedback and suggestion clarity.
  • Allows full control over fill behavior, style, and interaction mode.

🧑‍💻 Author

Made with ❤️ by Antos Maman

📄 License

MIT License