All Projects â†’ xcarpentier â†’ react-native-suggester

xcarpentier / react-native-suggester

Licence: MIT license
🔎 React-Native package to decorate TextInput and get suggestions with good UX

Programming Languages

typescript
32286 projects
javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to react-native-suggester

react-native-otp-textinput
Text View usable for OTP / Pin implementation
Stars: ✭ 63 (+21.15%)
Mutual labels:  textinput
react-native-floating-label-input
A customizable React Native TextInput with its placeholder always shown. Includes masks, global styles, character count, and a bunch else.
Stars: ✭ 206 (+296.15%)
Mutual labels:  textinput
react-textinput-chip
React library to generate textinput chip.
Stars: ✭ 14 (-73.08%)
Mutual labels:  textinput
rich input
Rich input box, implement @Someone and subject with color highlighting
Stars: ✭ 58 (+11.54%)
Mutual labels:  textinput
react-native-element-textinput
A react-native TextInput, TagsInput and AutoComplete component easy to customize for both iOS and Android.
Stars: ✭ 28 (-46.15%)
Mutual labels:  textinput

   react-native-suggester

npm downloads npm version

react-native-suggester

React-Native package to decorate TextInput and get suggestions with good UX

How to use it ?

import { SuggesterProvider, SuggestTextInput } from 'react-native-suggester'

const DATA = [
  { id: 1, value: 'Honda' },
  { id: 2, value: 'BMW' },
  { id: 3, value: 'Harley-Davidson' },
  { id: 4, value: 'Yamaha' },
  { id: 5, value: 'Kawasaki' },
  { id: 6, value: 'Triumph' },
  { id: 8, value: 'Ducati' },
  { id: 9, value: 'Suzuki' },
]

export default class App extends React.Component {
  render() {
    return (
      <SuggesterProvider>
        {/* somewhere in your app */}
        <SuggestTextInput name="field1" data={DATA} style={styles.input} />
      </SuggesterProvider>
    )
  }
}

With HOC

import {
  SuggesterProvider,
  SuggestTextInput,
  setSuggestOptions,
} from 'react-native-suggester'

setSuggestOptions({
  statusBarHeight: 10,
  backgroundColor: 'white',
  textColor: 'black',
  textFont: 'System',
  textFontSize: 16,
  textWhenEmpty: '...',
})

@SuggesterProvider
class App extends React.Component {
  render() {
    return (
      <View>
        {/* somewhere in your app */}
        <SuggestTextInput name="field1" data={DATA} style={styles.input} />
      </View>
    )
  }
}

Hire an expert!

Looking for a ReactNative freelance expert with more than 12 years experience? Contact me from my website!

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