{"_id":"0bit-mentions","_rev":"1-ea67acce04095fef998823b0c0519ef0","name":"0bit-mentions","dist-tags":{"latest":"0.0.1"},"versions":{"0.0.1":{"name":"0bit-mentions","version":"0.0.1","description":"Mentions for 0bit","main":"index.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"repository":{"type":"git","url":"git+https://github.com/channingbabb/0bit-mentions.git"},"keywords":["react-native-mentions","react native mentions","react-native","react-component","editor","mobile","ios","android","mentions"],"author":{"name":"Channing Babb","email":"channingbabb@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/channingbabb/0bit-mentions/issues"},"homepage":"https://github.com/channingbabb/0bit-mentions#readme","directories":{"example":"example"},"_id":"0bit-mentions@0.0.1","_nodeVersion":"14.18.1","_npmVersion":"6.14.15","dist":{"integrity":"sha512-oiFFhArBQ54dusuG4Csr2b6w6iN96VIc37orKxkfaJGIDRma4oWahF8ZK/BIEquvZbtBg1gmFvc1KuHYtFhHSg==","shasum":"4fff08f0325f149b787fef1b8c9aca3ac529ff70","tarball":"https://registry.npmjs.org/0bit-mentions/-/0bit-mentions-0.0.1.tgz","fileCount":22,"unpackedSize":1546475,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh9MouCRA9TVsSAnZWagAA828P/2NU7hQQBGzBjxJHjwue\njkYrK2MUjuQB9WqshHzHutKLMR1inil/pEFAocORac9BjjtKnkLZabw81ASB\n5Xd6QT2COXbQOH00Wmj9J0rF0wVkVUsFltV9tCEvaJ6Tian/t7tRnZw/Fbiv\nwSq903Z2ijkqPO0NurYaPMdNiwR748jsnGRQAKkIXh0CoV1p03raavJ+4E5Z\nq8VQg9H6elMpbGj5/vnnpH3eE4kLxoE2mmqhBSVMOH9+a5EN4gSLAEScMb1I\nmBVSw5qsk28h5NAJxHOJmv8Dr0nWbR0uSrHlW9qTJjneka5EXVihGH/qs5HF\n1XTNWCnWBsV3QgIjmsSTz9MuBtERVceS1u4/kRj7imrEkvZIaAu5UGilLwAB\n52Ca+ZfOkgzW2lWLTyJKUPweOkiPD2FaaOSxQV/EJQqc3WrC2S8YVTLd4zUY\nF1QrJlnzm0F9Lps4stCEsnFbMlHZYMSD0U6HrfumFfv5asHIeIz9PnZe5Crr\nQguzmhLs4+BuALgH5oZFlcfnTWXET8lUT2etdoCGhKhSjlZTv3aOLBSIH5FM\nFTVWjO1N+7ywXQ0PH+F5rTk+nJOyN84aEjVQIb2Op4ojk277zKTDkCcdj9gE\ncxIg/ObEVcJ8CWm93cKwQsmcnlbyjsZEE8LbwnQmGN38a75HrRevx3h4IzR4\nHeej\r\n=ImDq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFop961UNBn1Td6NG5OYoWIBgmd4Dfy+R/YJ476g6OWRAiAti4xMA/2MRwW3iFadVadjldlk7wVyH8erB3TxrTtNVA=="}]},"_npmUser":{"name":"channingb","email":"channingbabb@gmail.com"},"maintainers":[{"name":"channingb","email":"channingbabb@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/0bit-mentions_0.0.1_1643432494633_0.9655642458977223"},"_hasShrinkwrap":false}},"time":{"created":"2022-01-29T05:01:34.633Z","0.0.1":"2022-01-29T05:01:34.801Z","modified":"2022-04-04T10:08:34.641Z"},"maintainers":[{"name":"channingb","email":"channingbabb@gmail.com"}],"description":"Mentions for 0bit","homepage":"https://github.com/channingbabb/0bit-mentions#readme","keywords":["react-native-mentions","react native mentions","react-native","react-component","editor","mobile","ios","android","mentions"],"repository":{"type":"git","url":"git+https://github.com/channingbabb/0bit-mentions.git"},"author":{"name":"Channing Babb","email":"channingbabb@gmail.com"},"bugs":{"url":"https://github.com/channingbabb/0bit-mentions/issues"},"license":"MIT","readme":"# react-native-mentions-editor [![npm version](https://badge.fury.io/js/react-native-mentions-editor.svg)](https://badge.fury.io/js/react-native-mentions-editor)\nMentions TextInput for React Native. Tested on iOS and should work on Android as well. Because it's a plain Javascript base solution with some react-native TextInput support. \n - Inspiration [react-native-mentions](https://github.com/harshq/react-native-mentions)\n\n\n## Installation\n\n```yarn add react-native-mentions-editor```\nor\n```npm install --save react-native-mentions-editor```\n\n```\nIf you love this component, give a star, you will be a ray of sunshine :)\n```\n\n## Demo\n\n![alt text](screens/m1.gif \"Screenshots\")\n![alt text](screens/m2.gif \"Screenshots\")\n![alt text](screens/m3.gif \"Screenshots\")\n![alt text](screens/m-zoom-speed-1.gif \"Screenshots\")\n![alt text](screens/m-zoom-speed-2.gif \"Screenshots\")\n![alt text](screens/m-zoom-speed-3.gif \"Screenshots\")\n\n## Usage\n\n```js\nimport Editor, { displayTextWithMentions} from 'react-native-mentions-editor';\nconst users = [ \n    { \"id\": 1, \"name\": \"Raza Dar\", \"username\": \"mrazadar\", \"gender\": \"male\"},\n    { \"id\": 3, \"name\": \"Atif Rashid\", \"username\": \"atif.rashid\", \"gender\": \"male\"},\n    { \"id\": 4, \"name\": \"Peter Pan\", \"username\": \"peter.pan\", \"gender\": \"male\"},\n    { \"id\": 5, \"name\": \"John Doe\", \"username\": \"john.doe\", \"gender\": \"male\"}, \n    { \"id\": 6, \"name\": \"Meesha Shafi\", \"username\": \"meesha.shafi\", \"gender\": \"female\"}\n];\n<Editor \n    list={users} \n    initialValue={this.state.initialValue}\n    clearInput={this.state.clearInput}\n    onChange={this.onChangeHandler}\n    showEditor={this.state.showEditor}\n    toggleEditor={this.toggleEditor}\n    showMentions={this.state.showMentions}\n    onHideMentions={this.onHideMentions}\n    ....\n/>\n\nconst formatMentionNode = (txt, key)=> (\n  <Text key={key} style={styles.mention}>\n      {txt}\n  </Text>\n)\n\n<Text style={styles.messageText}>\n    {displayTextWithMentions(message.text, formatMentionNode)}\n</Text>\n```\n## How it works \n\nThis component allows you to @mention anywhere in the input value. (Not possible using [react-native-mentions](https://github.com/harshq/react-native-mentions)). \nWork nicely with selection and highlight of text. This component used special mark-up `@[username](id:1)` to differentiate mentions in the input value. \nWhenever input value change the `onChange` callback will be called, with an object containing two properties. \n\n```js \nthis.props.onChange({\n    displayText: text,// displayText: \"Hey @mrazadar this is good work\"\n    text: this.formatTextWithMentions(text) //text: \"Hey @[mrazadar](id:1) this is good work\" \n});\n```\n\n`displayText` Will have raw text user will see on the screen. You can see that in the comment. \n`text` Will have formatted text with some markup to parse mentions on the server and other clients. There is a function called `displayTextWithMentions` you can use this function to parse this mark-up with the parser function (Which format the mention node according to formatter function. Check the example app). \n\nIf you want to only parse mentions in the string but don't want to format them you can use this `EditorUtils.findMentions` function to actually parse the mentions in the string. \nThis will parse special mark-up `@[username](id:1)` and gives you the exact `positions` and `username` and `id` for that mention. Which you can use for tagging / emailing purposes on the server etc.\nYou can use this function as: \n\n\n```js\nimport { EU as EditorUtils } from 'react-native-mentions-editor';\nEditorUtils.findMentions(\"Hey @[mrazadar](id:1) this is good work\" );\n\n//Check the definition of this function\nfindMentions: (val) => {\n    /**\n     * Both Mentions and Selections are 0-th index based in the strings\n     * meaning their indexes in the string start from 0\n     * findMentions finds starting and ending positions of mentions in the given text\n     * @param val string to parse to find mentions\n     * @returns list of found mentions \n     */\n    let reg = /@\\[([^\\]]+?)\\]\\(id:([^\\]]+?)\\)/igm;\n    let indexes = [];\n    while (match = reg.exec(val)) {\n        indexes.push({\n            start: match.index, \n            end: (reg.lastIndex-1),\n            username: match[1],\n            userId: match[2],\n            type: EU.specialTagsEnum.mention\n        });\n    }\n    return indexes;\n},\n```\n\n## Props {property : type}\n\n**`list: array`** This should be the list of objects to be used as options for the mentions list. **Note** This must contain `id` and `username` properties to uniqely identify object in the list. \n\n**`initialValue: string`** Use this to initialize TextInput with the initial value. Usage. `initalValue: \"Hey @[mrazadar](id:1) this is good work\"`\n\n**`clearInput: bool`** When true input will be clear automatically. \n\n**`onChange: function`** This function will be called on input change event.  \n\n**`showEditor: bool`** Programmatically show/hide editor by using this property. \n\n**`toggleEditor: function`** Use this to handle `blur` event on input. \n\n**`showMentions: bool`** Use this property to programmatically trigger the `mentionsList` this will add `@` character in the value.\n\n**`onHideMentions: function`** This callback will be called when user stop tracking of mention. \n\n**`placeholder: string`** placeholder for empty input. \n\n**`renderMentionList: function`** If you want to render totally different list. You can use this property to provide alternative mention list renderer. It will be called with certain properties to controll the functionality of list.\n\n```js\nrenderMentionList Props: object\n\n mentionListProps= {\n    list: props.list, //the default list you passed to this component\n    keyword: state.keyword, //keyword to filter the list. e.g. `@m`\n    isTrackingStarted: state.isTrackingStarted, // will be true if user started typing `@` \n    onSuggestionTap: this.onSuggestionTap.bind(this), //this function should be called once user press on the list item\n    editorStyles: props.editorStyles, // these will be the props passed to the Editor component. \n};\n\n```\n**`editorStyles: object`** This object will contain the overriding styles for different nodes. Check the below object to see how you can override styles. \n\n```js \neditorStyles: {\n    mainContainer: {}, \n    editorContainer: {...}, \n    inputMaskTextWrapper: {},\n    inputMaskText: {},\n    input: {},\n    mentionsListWrapper:{},\n    mentionListItemWrapper: {} \n    mentionListItemTextWrapper: {},\n    mentionListItemTitle: {}\n    mentionListItemUsername: {}\n}\n```\n\n## Example \n\nCheck out the full example in  [example](https://github.com/mrazadar/react-native-mentions-editor/tree/master/example) folder\n\n## License\n\n[MIT License](http://opensource.org/licenses/mit-license.html). © Muhammad Raza Dar","readmeFilename":"README.md"}