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

Comparing version 3.0.0 to 3.1.0

dist/hooks/use-mentions.js

@@ -76,9 +76,11 @@ "use strict";
         children: react_1.default.createElement(react_native_1.Text, null, mentionState.parts.map(({ text, config, data }, index) => {
-            var _a, _b;
-            return config
-                ? react_1.default.createElement(react_native_1.Text, {
-                    key: `${index}-${(_a = data === null || data === void 0 ? void 0 : data.trigger) !== null && _a !== void 0 ? _a : 'pattern'}`,
-                    style: (_b = config.textStyle) !== null && _b !== void 0 ? _b : _mention_utils_1.defaultTriggerTextStyle,
-                }, text)
-                : react_1.default.createElement(react_native_1.Text, { key: index }, text);
+            var _a;
+            if (!config) {
+                return react_1.default.createElement(react_native_1.Text, { key: index }, text);
+            }
+            const style = typeof config.textStyle === 'function' ? config.textStyle(data) : config.textStyle;
+            return react_1.default.createElement(react_native_1.Text, {
+                key: `${index}-${(_a = data === null || data === void 0 ? void 0 : data.trigger) !== null && _a !== void 0 ? _a : 'pattern'}`,
+                style: style !== null && style !== void 0 ? style : _mention_utils_1.defaultTriggerTextStyle,
+            }, text);
         })),
@@ -85,0 +87,0 @@ };

dist/types/types.d.ts

@@ -40,3 +40,3 @@ import type { Change } from 'diff';
     isInsertSpaceAfterMention?: boolean;
-    textStyle?: StyleProp<TextStyle>;
+    textStyle?: StyleProp<TextStyle> | ((data?: TriggerData) => StyleProp<TextStyle>);
     getPlainString?: (mention: TriggerData) => string;
@@ -53,3 +53,3 @@ };
     pattern: RegExp;
-    textStyle?: StyleProp<TextStyle>;
+    textStyle?: StyleProp<TextStyle> | ((data?: TriggerData) => StyleProp<TextStyle>);
 };
@@ -56,0 +56,0 @@ declare type Config = TriggerConfig | PatternConfig;

package.json

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

README.md

@@ -18,2 +18,3 @@ ## react-native-controlled-mentions [![npm version][npm-image]][npm-url]
 - [API](#api)
+- [Migration Guide](#migration-guide)
 - [Parsing Mention's Value](#parsing-mentions-value)
@@ -27,3 +28,3 @@ - [Rendering Mention's Value](#rendering-mentions-value)
 
-Try it on Expo Snack: https://snack.expo.io/@dabakovich/mentionsapp
+Try it on Expo Snack: https://snack.expo.dev/@dabakovich/mentionsappv3?platform=ios
 
@@ -301,19 +302,19 @@ ![](demo.gif)
 
-| **Property name**           | **Description**                                                                                | **Type**                                                  | **Required**                | **Default** |
-| --------------------------- | ---------------------------------------------------------------------------------------------- | --------------------------------------------------------- | --------------------------- | ----------- |
-| `trigger`                   | Character that will trigger current mention type                                               | string                                                    | true                        |             |
-| `pattern`                   | Custom trigger pattern                                                                         | number                                                    | false                       |             |
-| `getTriggerData`            | Callback for getting [TriggerData](#type-triggerdata), is required when we have custom pattern | (match: string) => [TriggerData](#type-triggerdata)       | true, when `pattern` exists |             |
-| `getTriggerValue`           | Callback for getting trigger value, is required when we have custom pattern                    | (triggerData: [TriggerData](#type-triggerdata)) => string | true, when `pattern` exists |             |
-| `allowedSpacesCount`        | How much spaces are allowed for mention keyword                                                | number                                                    | 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: [TriggerData](#type-triggerdata)) => string     | false                       |             |
+| **Property name**           | **Description**                                                                                | **Type**                                                                                      | **Required**                | **Default** |
+| --------------------------- | ---------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------- | --------------------------- | ----------- |
+| `trigger`                   | Character that will trigger current mention type                                               | string                                                                                        | true                        |             |
+| `pattern`                   | Custom trigger pattern                                                                         | RegExp                                                                                        | false                       |             |
+| `getTriggerData`            | Callback for getting [TriggerData](#type-triggerdata), is required when we have custom pattern | (match: string) => [TriggerData](#type-triggerdata)                                           | true, when `pattern` exists |             |
+| `getTriggerValue`           | Callback for getting trigger value, is required when we have custom pattern                    | (triggerData: [TriggerData](#type-triggerdata)) => string                                     | true, when `pattern` exists |             |
+| `allowedSpacesCount`        | How much spaces are allowed for mention keyword                                                | number                                                                                        | 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> \| (mention: [TriggerData](#type-triggerdata)) => StyleProp\<TextStyle> | false                       |             |
+| `getPlainString`            | Function for generating custom mention text in text input                                      | (mention: [TriggerData](#type-triggerdata)) => string                                         | false                       |             |
 
 ### Type `PatternConfig`
 
-| **Property name** | **Description**                                          | **Type**              | **Required** | **Default** |
-| ----------------- | -------------------------------------------------------- | --------------------- | ------------ | ----------- |
-| `pattern`         | RegExp for parsing a pattern, should include global flag | RegExp                | true         |             |
-| `textStyle`       | Text style for pattern in `TextInput`                    | StyleProp\<TextStyle> | false        |             |
+| **Property name** | **Description**                                          | **Type**                                                                                      | **Required** | **Default** |
+| ----------------- | -------------------------------------------------------- | --------------------------------------------------------------------------------------------- | ------------ | ----------- |
+| `pattern`         | RegExp for parsing a pattern, should include global flag | RegExp                                                                                        | true         |             |
+| `textStyle`       | Text style for pattern in `TextInput`                    | StyleProp\<TextStyle> \| (mention: [TriggerData](#type-triggerdata)) => StyleProp\<TextStyle> | false        |             |
 
@@ -376,7 +377,7 @@ > **⚠️ Important:** The `pattern` regex **must include capturing groups** for the library to work correctly.
 
-Name that will be shown in `MentionInput` when user will select the suggestion.
+Name that will be shown in your `TextInput` when user will select the suggestion.
 
 ### Type `TriggerData`
 
-For example, we have that mention value `{@}[David Tabaka](123)`. Then after parsing that string by `mentionRegEx` we will
+For example, we have that mention value `{@}[David Tabaka](123)`. Then after parsing that string by `triggerRegEx` we will
 get next properties:
@@ -400,3 +401,3 @@
 
-### Default pattern `mentionRegEx`
+### Default pattern `triggerRegEx`
 
@@ -407,3 +408,3 @@ ```jsregexp
 
-### `MentionInput` component props
+### Deprecated `MentionInput` component props
 
@@ -420,12 +421,18 @@ If you prefer to use class component without hooks the `MentionInput` is for you.
 
+## Migration Guide
+
+### From v2 to v3
+
+For detailed migration instructions from v2 to v3, please see [MIGRATION.md](./MIGRATION.md).
+
 ## Parsing Mention's Value
 
-You can import RegEx that is using in the component and then extract all your mentions
-from `MentionInput`'s value using your own logic.
+You can import RegEx that is using in the component and then extract all mentions
+from `textValue` using your own logic.
 
 ```ts
-import { mentionRegEx } from 'react-native-controlled-mentions';
+import { triggerRegEx } from 'react-native-controlled-mentions';
 ```
 
-Or you can use `replaceTriggerValues` helper to replace all mentions from `MentionInput`'s input using
+Or you can use `replaceTriggerValues` helper to replace all mentions from `textValue` using
 your replacer function that receives [TriggerData](#type-triggerdata) type and returns string.
@@ -488,4 +495,4 @@
  *
- * @param value - value from MentionInput
- * @param configs - configs array that you providing to MentionInput
+ * @param value - `textValue` that you're getting from the `useState` hook
+ * @param configs - configs array that you providing to the `useMentions` hook
  */
@@ -501,2 +508,4 @@ const renderValue: FC = (value: string, configs: Config[]) => {
 
+- Add ability to have dynamic text style (#134, #135)
+- Add ability to remove whole mention by backspace (#88, #129, #133)
 - ~~Add support for different text formatting (e.g. URLs)~~
@@ -508,3 +517,6 @@ - ~~Add more customizations~~ DONE
 
-- Mention name regex accepts white spaces (e.g. `{name: ' ', value: 1}`)
+- Lags with very long text (#92)
+- Could remove mention when two triggers are together (#137)
+- Could merge mention with text on some Samsung devices (#118)
+- ~~Mention name regex accepts white spaces (e.g. `{name: ' ', value: 1}`)~~ FIXED
 - ~~Keyboard auto-correction not working if suggested word has the same length~~ FIXED
@@ -515,5 +527,14 @@ - ~~Text becomes transparent when setting custom font size in TextInput~~ FIXED
 
-<a href="https://www.buymeacoffee.com/dabakovich" target="_blank"><img src="https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png" alt="Buy Me A Coffee" style="height: 41px !important;width: 174px !important;box-shadow: 0px 3px 2px 0px rgba(190, 190, 190, 0.5) !important;-webkit-box-shadow: 0px 3px 2px 0px rgba(190, 190, 190, 0.5) !important;" ></a>
+Unfortunately, common donation platforms (like GitHub Sponsors, Buy Me a Coffee, PayPal, and Stripe) are currently not available in Ukraine.
 
+However, you can still support me and this library in other meaningful ways:
+
+- ⭐ **Star the project** on GitHub to help increase its visibility
+- 🔗 **Link back to this project** in your own projects and documentation
+- 🤝 **Contribute** with your great ideas, bug reports, or code improvements
+- 📢 **Share** the project with others who might find it useful
+
+Your support in any of these forms is greatly appreciated and helps keep this project alive and growing!
+
 [npm-image]: https://img.shields.io/npm/v/react-native-controlled-mentions
 [npm-url]: https://npmjs.org/package/react-native-controlled-mentions

No alert changes

Improved metrics

Total package byte prevSize

83452

2.15%

Lines of code

1053

0.19%

Number of lines in readme file

530

4.13%

No dependency changes