Skip to content

Commit

Permalink
feat: update readme, add demo
Browse files Browse the repository at this point in the history
resolves #4
  • Loading branch information
dabakovich committed Dec 17, 2020
1 parent 2ef3f04 commit 4e493f2
Show file tree
Hide file tree
Showing 2 changed files with 19 additions and 12 deletions.
31 changes: 19 additions & 12 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,16 +1,20 @@
React Native Controlled Mentions
react-native-controlled-mentions ![](https://img.shields.io/npm/v/react-native-controlled-mentions)
-

### About

Pretty simple and fully controlled mentions input. It can:

* Gracefully render formatted mentions directly in RN `TextInput` component
* Use `value`/`onChange` as in usual `TextInput` props
* Completely typed (written on TypeScript)
* No need native libraries

### Getting started
Demo
-
Try it on Expo Snack: https://snack.expo.io/@dabakovich/mentionsapp

![](demo.gif)

Getting started
-

Install the library using either Yarn:

Expand All @@ -20,9 +24,8 @@ or npm:

``npm install --save react-native-controlled-mentions``

### Example

Try it on Expo Snack: https://snack.expo.io/@dabakovich/mentionsapp
Example
-

```tsx
import * as React from 'react';
Expand Down Expand Up @@ -94,7 +97,8 @@ const App = () => {
export default App;
```

### Configuration
Configuration
-

The `Mentions` component supports next props:

Expand All @@ -109,7 +113,8 @@ The `Mentions` component supports next props:
| containerStyle | StyleProp\<ViewStyle> | false | | |
| ...textInputProps | TextInputProps | false | | Other text input props |

### Parsing `Mention`'s value
Parsing `Mention`'s value
-

You can import RegEx that is using in the component and then extract all your mentions
from `Mention`'s value using your own logic.
Expand All @@ -130,12 +135,14 @@ console.log(replaceMentionValues(value, ({id}) => `@${id}`)); // Hello @5! How a
console.log(replaceMentionValues(value, ({name}) => `@${name}`)); // Hello @David Tabaka! How are you?
```

### To Do
To Do
-

* Add more customizations
* Add ability to handle few mention types ("#", "@" etc)

### Known issues
Known issues
-

* Mention name regex accepts white spaces (eg `{name: ' ', value: 1}`)
* ~~Keyboard auto-correction not working if suggested word has the same length~~ FIXED
Expand Down
Binary file added demo.gif
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 4e493f2

Please sign in to comment.