🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more →
react-native-controlled-mentions
Advanced tools
react-native-controlled-mentions - npm Package Compare versions
Comparing version 1.0.0-0 to 1.0.0
| # Changelog | ||
| ## [Unreleased](https://github.com/dabakovich/react-native-controlled-mentions/tree/HEAD) | ||
| [Full Changelog](https://github.com/dabakovich/react-native-controlled-mentions/compare/v1.0.0-0...HEAD) | ||
| **Implemented enhancements:** | ||
| - Suggestions- [\#9](https://github.com/dabakovich/react-native-controlled-mentions/issues/9) | ||
| ## [v1.0.0-0](https://github.com/dabakovich/react-native-controlled-mentions/tree/v1.0.0-0) (2020-12-25) | ||
| [Full Changelog](https://github.com/dabakovich/react-native-controlled-mentions/compare/v0.1.8...v1.0.0-0) | ||
| **Implemented enhancements:** | ||
| - Input editing is not stable with keyboard auto-correction [\#1](https://github.com/dabakovich/react-native-controlled-mentions/issues/1) | ||
| **Merged pull requests:** | ||
| - fix: wrong editing with keyboard auto-correction [\#12](https://github.com/dabakovich/react-native-controlled-mentions/pull/12) ([dabakovich](https://github.com/dabakovich)) | ||
| ## [v0.1.8](https://github.com/dabakovich/react-native-controlled-mentions/tree/v0.1.8) (2020-12-22) | ||
@@ -64,6 +84,2 @@ | ||
| **Implemented enhancements:** | ||
| - Input editing is not stable with keyboard auto-correction [\#1](https://github.com/dabakovich/react-native-controlled-mentions/issues/1) | ||
| ## [v0.1.0](https://github.com/dabakovich/react-native-controlled-mentions/tree/v0.1.0) (2020-12-09) | ||
@@ -70,0 +86,0 @@ |
@@ -33,5 +33,3 @@ import { ReactNode, Ref } from 'react'; | ||
| renderSuggestions?: (props: MentionSuggestionsProps) => ReactNode; | ||
| onKeywordChange?: (keyword: string) => void; | ||
| isInsertSpaceAfterMention?: boolean; | ||
| isAllowSpacesInName?: boolean; | ||
| textStyle?: StyleProp<TextStyle>; | ||
@@ -38,0 +36,0 @@ getPlainString?: (mention: MentionData) => string; |
| { | ||
| "name": "react-native-controlled-mentions", | ||
| "version": "1.0.0-0", | ||
| "version": "1.0.0", | ||
| "description": "Fully controlled React Native mentions component", | ||
@@ -16,3 +16,4 @@ "keywords": [ | ||
| "test": "jest", | ||
| "postversion": "git push && git push --tags" | ||
| "postversion": "git push && git push --tags", | ||
| "changelog": "github_changelog_generator -u dabakovich -p react-native-controlled-mentions" | ||
| }, | ||
@@ -45,3 +46,7 @@ "files": [ | ||
| "string.prototype.matchall": "4.0.3" | ||
| }, | ||
| "jest": { | ||
| "preset": "ts-jest", | ||
| "testEnvironment": "node" | ||
| } | ||
| } |
161
README.md
| react-native-controlled-mentions [![npm version][npm-image]][npm-url] | ||
| - | ||
| Pretty simple and fully controlled mentions input. It can: | ||
| Pretty simple and fully controlled mention input. It can: | ||
| * Gracefully render formatted mentions directly in RN `TextInput` component | ||
| * Support for different mention types (user [@mentions](), **#hashtags**, etc) | ||
| * Use `value`/`onChange` as in usual `TextInput` props | ||
| * Completely typed (written on TypeScript) | ||
| * No need native libraries | ||
| * No need for native libraries | ||
@@ -27,11 +28,31 @@ Demo | ||
| Example | ||
| Usage | ||
| - | ||
| Import the [MentionInput](#mentioninput-component-props) component: | ||
| ```tsx | ||
| import * as React from 'react'; | ||
| import { FC, useState } from 'react'; | ||
| import { Pressable, SafeAreaView, Text, View } from 'react-native'; | ||
| import { Mentions, MentionSuggestionsProps, Suggestion } from 'react-native-controlled-mentions'; | ||
| import { MentionInput } from 'react-native-controlled-mentions' | ||
| ``` | ||
| Replace your [TextInput](https://reactnative.dev/docs/textinput) by [MentionInput](#mentioninput-component-props) component and add the `mentionTypes` property where you can define what mention types you want to support. It takes an array of [MentionType](#mentiontype-type-props) objects. | ||
| ```tsx | ||
| <Mentions | ||
| value={value} | ||
| onChange={setValue} | ||
| mentionTypes={[ | ||
| { | ||
| trigger: '@', // Should be a single character like '@' or '#' | ||
| renderSuggestions, | ||
| textStyle: {fontWeight: 'bold', color: 'blue'}, // The mention style in the input | ||
| }, | ||
| ]} | ||
| /> | ||
| ``` | ||
| Define your `renderSuggestions` functional component that receive [MentionSuggestionsProps](#mentionsuggestionsprops-type-props): | ||
| ```tsx | ||
| const suggestions = [ | ||
@@ -45,3 +66,3 @@ {id: '1', name: 'David Tabaka'}, | ||
| const MentionSuggestions: FC<MentionSuggestionsProps> = ({keyword, onSuggestionPress}) => { | ||
| const renderSuggestions: FC<MentionSuggestionsProps> = ({keyword, onSuggestionPress}) => { | ||
| if (keyword == null) { | ||
@@ -53,3 +74,3 @@ return null; | ||
| <View> | ||
| {users | ||
| {suggestions | ||
| .filter(one => one.name.toLocaleLowerCase().includes(keyword.toLocaleLowerCase())) | ||
@@ -69,42 +90,92 @@ .map(one => ( | ||
| ); | ||
| } | ||
| }; | ||
| ``` | ||
| const App = () => { | ||
| const [value, setValue] = useState('Hello @[Mary](2)! How are you?'); | ||
| You're done! | ||
| return ( | ||
| <SafeAreaView> | ||
| <Mentions | ||
| value={value} | ||
| onChange={setValue} | ||
| The whole example is in the `/example` folder. | ||
| renderSuggestions={MentionSuggestions} | ||
| API | ||
| - | ||
| placeholder="Type here..." | ||
| style={{padding: 12}} | ||
| /> | ||
| </SafeAreaView> | ||
| ); | ||
| }; | ||
| ### `MentionInput` component props | ||
| export default App; | ||
| | **Property name** | **Description** | **Type** | **Required** | **Default** | | ||
| |------------------- |-------------------------------------------------------------------- |---------------------------------------- |------------ |------------ | | ||
| | `value` | The same as in `TextInput` | string | true | | | ||
| | `onChange` | The same as in `TextInput` | (value: string) => void | true | | | ||
| | `mentionTypes` | Declare what mention types you want to support (mentions, hashtags) | [MentionType](#mentiontype-type-props)[] | false | [] | | ||
| | `inputRef` | Reference to the `TextInput` component inside `MentionInput` | Ref\<TextInput> | false | | | ||
| | `containerStyle` | Style to the `MentionInput`'s root component | StyleProp\<TextStyle> | false | | | ||
| | ...textInputProps | Other text input props | TextInputProps | false | | | ||
| ### `MentionType` type props | ||
| | **Property name** | **Description** | **Type** | **Required** | **Default** | | ||
| |--------------------------- |----------------------------------------------------------------------------------- |----------------------------------------------------------------------------------- |------------ |----------- | | ||
| | `trigger` | Character that will trigger current mention type | string | true | | | ||
| | `renderSuggestions` | Renderer for mention suggestions component | (props: [MentionSuggestionsProps](#mentionsuggestionsprops-type-props)) => ReactNode | false | | | ||
| | `isInsertSpaceAfterMention` | Should we add a space after selected mentions if the mention is at the end of row | boolean | false | false | | ||
| | `textStyle` | Text style for mentions in `TextInput` | StyleProp\<TextStyle> | false | | | ||
| | `getPlainString` | Function for generating custom mention text in text input | (mention: [MentionData](#mentiondata-type-props)) => string | false | | | ||
| ### `MentionSuggestionsProps` type props | ||
| `keyword: string | undefined` | ||
| Keyword that will provide string between trigger character (e.g. '@') and cursor. | ||
| If the cursor is not tracking any mention typing the `keyword` will be `undefined`. | ||
| Examples where @name is just plain text yet, not mention and `|` is cursor position: | ||
| ``` | ||
| '|abc @name dfg' - keyword is undefined | ||
| 'abc @| dfg' - keyword is '' | ||
| 'abc @name| dfg' - keyword is 'name' | ||
| 'abc @na|me dfg' - keyword is 'na' | ||
| 'abc @|name dfg' - keyword is against '' | ||
| 'abc @name |dfg' - keyword is against undefined | ||
| ``` | ||
| `onSuggestionPress: (suggestion: Suggestion) => void` | ||
| Configuration | ||
| - | ||
| You should call that callback when user selects any suggestion. | ||
| The `Mentions` component supports next props: | ||
| ### `Suggestion` type props | ||
| | Property name | Type | Required | Default value | Description | | ||
| |---------------------------|---------------------------------------------------|----------|---------------|------------------------------------------------------------------------------------| | ||
| | value | string | true | | | | ||
| | onChange | function (value) | true | | | | ||
| | renderSuggestions | function ({keyword, onSuggestionPress}) ReactNode | false | | | | ||
| | trigger | string | false | '@' | Character that will trigger mentions | | ||
| | isInsertSpaceAfterMention | boolean | false | false | Should we add a space after selected mentions if the mention is at the end of row | | ||
| | inputRef | Ref\<TextInput> | false | | | | ||
| | mentionTextStyle | StyleProp\<TextStyle> | false | | Text style for mentions in TextInput | | ||
| | containerStyle | StyleProp\<ViewStyle> | false | | | | ||
| | ...textInputProps | TextInputProps | false | | Other text input props | | ||
| `id: string` | ||
| Unique id for each suggestion. | ||
| `name: string` | ||
| Name that will be shown in `MentionInput` when user will select the suggestion. | ||
| ### `MentionData` type props | ||
| For example, we have that mention value `@[David Tabaka](123)`. Then after parsing that string by `mentionRegEx` we will get next properties: | ||
| `original: string` | ||
| The whole mention value string - `@[David Tabaka](123)` | ||
| `trigger: string` | ||
| The extracted trigger - `@` | ||
| `name: string` | ||
| The extracted name - `David Tabaka` | ||
| `id: string` | ||
| The extracted id - `123` | ||
| ### `mentionRegEx` | ||
| ```jsregexp | ||
| /(?<original>(?<trigger>.)\[(?<name>([^[]*))]\((?<id>([\d\w-]*))\))/gi; | ||
| ``` | ||
| Parsing `Mention`'s value | ||
@@ -120,4 +191,4 @@ - | ||
| 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. | ||
| Or you can use `replaceMentionValues` helper to replace all mentions from `MentionInput`'s input using | ||
| your replacer function that receives [MentionData](#mentiondata-type-props) type and returns string. | ||
@@ -136,4 +207,5 @@ ```ts | ||
| * Add more customizations | ||
| * Add ability to handle few mention types ("#", "@" etc) | ||
| * Add support for different text formatting (e.g. URLs) | ||
| * ~~Add more customizations~~ DONE | ||
| * ~~Add ability to handle few mention types ("#", "@" etc)~~ DONE | ||
@@ -143,3 +215,3 @@ Known issues | ||
| * Mention name regex accepts white spaces (eg `{name: ' ', value: 1}`) | ||
| * Mention name regex accepts white spaces (e.g. `{name: ' ', value: 1}`) | ||
| * ~~Keyboard auto-correction not working if suggested word has the same length~~ FIXED | ||
@@ -149,3 +221,2 @@ * ~~Text becomes transparent when setting custom font size in TextInput~~ FIXED | ||
| [npm-image]: https://img.shields.io/npm/v/react-native-controlled-mentions | ||
| [npm-url]: https://npmjs.org/package/react-native-controlled-mentions |
Fixed alerts
No v1
QualityPackage is not semver >=1. This means it is not stable and does not support ^ ranges.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
67042
5.66%- Number of low quality alerts
1
-50%- Number of lines in readme file
215
49.31%Worsened metrics
- Lines of code
780
-0.26%No dependency changes