react-native-controlled-mentions - npm Package Compare versions

Comparing version 0.1.1 to 0.1.2

package.json

 {
   "name": "react-native-controlled-mentions",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "Fully controlled React Native mentions component",
@@ -5,0 +5,0 @@ "keywords": [

README.md

 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
+
 Install the library using either Yarn:
@@ -15,6 +25,9 @@
 
-```
-import React, { FC, useState } from 'react';
+Try it on Expo Snack: https://snack.expo.io/@dabakovich/mentionsapp
+
+```tsx
+import * as React from 'react';
+import { FC, useState } from 'react';
 import { Mentions, Suggestion } from 'react-native-controlled-mentions';
-import { Pressable, Text, View } from 'react-native';
+import { Pressable, SafeAreaView, Text, View } from 'react-native';
 
@@ -48,3 +61,3 @@ const suggestions = [
           key={suggestion.id}
-          style={{padding: 8}}
+          style={{padding: 12}}
           onPress={() => onSuggestionPress(suggestion)}
@@ -60,38 +73,71 @@ >
 const App = () => {
-  const [value, setValue] = useState('Hello @[David Tabaka](5)! How are you?');
+  const [value, setValue] = useState('Hello @[Mary](2)! How are you?');
 
   return (
-    <Mentions
-      value={value}
-      onChange={setValue}
+    <SafeAreaView>
+      <Mentions
+        value={value}
+        onChange={setValue}
 
-      renderSuggestions={({keyword, onSuggestionPress}) => (
-        <MentionSuggestions
-          keyword={keyword}
-          suggestions={suggestions}
-          onSuggestionPress={onSuggestionPress}
-        />
-      )}
-    />
+        renderSuggestions={({keyword, onSuggestionPress}) => (
+          <MentionSuggestions
+            keyword={keyword}
+            suggestions={suggestions}
+            onSuggestionPress={onSuggestionPress}
+          />
+        )}
+
+        placeholder="Type here..."
+        style={{padding: 12}}
+      />
+    </SafeAreaView>
   );
 };
 
-export { App };
+export default App;
 ```
 
 ### Configuration
+
 The `Mentions` component supports next props:
 
-| Prop name         | Type                                              | Required | Default value | Description |
-|-------------------|---------------------------------------------------|----------|---------------|-------------|
-| value             | string                                            | true     |               |             |
-| onChange          | function (value)                                  | true     |               |             |
-| renderSuggestions | function ({keyword, onSuggestionPress}) ReactNode | false    |               |             |
-| trigger           | string                                            | false    | '@'           |             |
-| inputRef          | TextInput                                         | false    |               |             |
-| containerStyle    | StyleProp<ViewStyle>                              | false    |               |             |
+| Prop name         | Type                                              | Required | Default value | Description                       |
+|-------------------|---------------------------------------------------|----------|---------------|-----------------------------------|
+| value             | string                                            | true     |               |                                   |
+| onChange          | function (value)                                  | true     |               |                                   |
+| renderSuggestions | function ({keyword, onSuggestionPress}) ReactNode | false    |               |                                   |
+| trigger           | string                                            | false    | '@'           |                                   |
+| inputRef          | TextInput                                         | false    |               |                                   |
+| containerStyle    | StyleProp\<ViewStyle>                             | false    |               |                                   |
+| ...textInputProps | TextInputProps                                    | false    |               |  Other text input props           |
 
+### 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.
+
+```ts
+import { mentionRegEx } from 'react-native-controlled-mentions';
+```
+
+Or you can use `replaceMentionValues` helper to replace all mentions from `Mention`'s input using
+your replacer function that receives `MentionData` type and returns string.
+
+```ts
+import { replaceMentionValues } from 'react-native-controlled-mentions';
+
+const value = 'Hello @[David Tabaka](5)! How are you?';
+
+console.log(replaceMentionValues(value, ({id}) => `@${id}`)); // Hello @5! How are you?
+console.log(replaceMentionValues(value, ({name}) => `@${name}`)); // Hello @David Tabaka! How are you?
+```
+
+### To Do
+* Add more customizations
+* Add ability to handle few mention types ("#", "@" etc)
+
 ### 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
 * ~~Text becomes transparent when setting custom font size in TextInput~~ FIXED

No alert changes

Improved metrics

Total package byte prevSize

40456

7.26%

Number of package files

25

4.17%

Number of lines in readme file

141

48.42%

No dependency changes