0.1.1 • Published 5 years ago

react-native-badge-input v0.1.1

Weekly downloads
1
License
MIT
Repository
github
Last release
5 years ago

React Native Badge Input

Modular badge input for React Native

Installation

yarn add react-native-badge-input

Usage

import React, { useState } from 'react'
import BadgeInput from 'react-native-badge-input'

let Example = () => {
  let [value, setValue] = useState('')
  let [badges, setBadges] = useState([])
  
  let addBadge = badge =>
    setBadges([...badges, badge])

  let removeBadge = removedBadge =>
    setBadges(
      badges.filter(badge => badge !== removedBadge)
    )

  return (
    <BadgeInput
      value={value}
      onChangeText={setValue}
      badges={badges}
      onBadgePress={removeBadge}
      onSubmitEditing={addBadge}
    />
  )
}

Props

TextInput props...

namerequireddefaultdescription
valueyesCurrent input value
onChangeTextyesTextInput onchangeText
badgesyesAn array of badges
onBadgePressyesBadge on press action
placeholdernoInput placeholder.
inputSuffixnoContent rendered at the end of the input, for example an icon.
badgeStylenoBadge component style
inputPropsnoProps additionally passed to input. This is useful if you want to pass any styles that are overriden by the props object.
keyExtractorno() => stringBadge key extractor.
textExtractorno() => stringBadge text extractor, required when your badge is not a string.