https://github.com/xkrsz/react-native-badge-input

Modular badge input for React Native
https://github.com/xkrsz/react-native-badge-input

Last synced: 8 days ago
JSON representation

Modular badge input for React Native

• Host: GitHub
• URL: https://github.com/xkrsz/react-native-badge-input
• Owner: xkrsz
• Created: 2019-08-07T14:50:38.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-04T06:45:29.000Z (almost 2 years ago)
• Last Synced: 2024-10-04T23:17:15.788Z (about 2 months ago)
• Language: TypeScript
• Homepage:
• Size: 417 KB
• Stars: 2
• Watchers: 2
• Forks: 3
• Open Issues: 7
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# React Native Badge Input

Modular badge input for React Native

## Installation

```bash

yarn add react-native-badge-input

```

## Usage

```jsx harmony

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 (

    

  )

}

```

## Props

[TextInput props...](https://facebook.github.io/react-native/docs/textinput)

| name                   | required | default   | description |

| ---------------------- | -------- | --------- | ----------- |

| value                  | yes      |           | Current input value |

| onChangeText           | yes      |           | [TextInput onchangeText](https://facebook.github.io/react-native/docs/textinput#onchangetext) |

| badges                 | yes      |           | An array of badges |

| onBadgePress           | yes      |           | Badge on press action |

| placeholder            | no       |           | Input placeholder. |

| inputSuffix            | no       |           | Content rendered at the end of the input, for example an icon. |

| badgeStyle             | no       |           | Badge component style |

| inputProps             | no       |           | Props additionally passed to input. This is useful if you want to pass any styles that are overriden by the props object. |

| keyExtractor           | no       | `() => string` | Badge key extractor. |

| textExtractor          | no       | `() => string` | Badge text extractor, required when your badge is not a string. |