{"id":22351110,"url":"https://github.com/koala-interactive/react-rich-mentions","last_synced_at":"2025-07-30T07:31:41.069Z","repository":{"id":49838832,"uuid":"294178652","full_name":"koala-interactive/react-rich-mentions","owner":"koala-interactive","description":"@mentions people, or #channels, or :smileys: on contenteditable element with styles","archived":false,"fork":false,"pushed_at":"2023-01-15T16:58:13.000Z","size":317,"stargazers_count":15,"open_issues_count":5,"forks_count":5,"subscribers_count":12,"default_branch":"master","last_synced_at":"2024-11-13T07:12:40.023Z","etag":null,"topics":["hacktoberfest","mentions","react","react-rich-mentions","rich"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/koala-interactive.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-09-09T17:11:27.000Z","updated_at":"2024-03-20T18:18:15.000Z","dependencies_parsed_at":"2023-02-09T23:00:56.110Z","dependency_job_id":null,"html_url":"https://github.com/koala-interactive/react-rich-mentions","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/koala-interactive%2Freact-rich-mentions","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/koala-interactive%2Freact-rich-mentions/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/koala-interactive%2Freact-rich-mentions/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/koala-interactive%2Freact-rich-mentions/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/koala-interactive","download_url":"https://codeload.github.com/koala-interactive/react-rich-mentions/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":228106545,"owners_count":17870437,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["hacktoberfest","mentions","react","react-rich-mentions","rich"],"created_at":"2024-12-04T12:13:02.969Z","updated_at":"2024-12-04T12:13:03.896Z","avatar_url":"https://github.com/koala-interactive.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-rich-mentions\n\n![GitHub package.json dependency version (prod)](https://img.shields.io/github/package-json/dependency-version/koala-interactive/react-rich-mentions/dev/react)\n[![Cypress.io](https://img.shields.io/badge/tested%20with-Cypress-04C38E.svg)](https://www.cypress.io/)\n![lint](https://github.com/koala-interactive/react-rich-mentions/workflows/lint/badge.svg?branch=master)\n![e2e](https://github.com/koala-interactive/react-rich-mentions/workflows/e2e/badge.svg?branch=master)\n\nReact library to handle **@mentions**, **#channels**, **:smileys:** and whatever with styles.\n\n## Getting started\n\nInstall the _react-rich-mentions_ package via npm:\n\n```\nnpm install react-rich-mentions --save\n```\n\nOr yarn:\n\n```\nyarn add react-rich-mentions\n```\n\nThe package exports React components for rendering the mentions autocomplete and contenteditable :\n\n```ts\nimport {\n  RichMentionsInput,\n  RichMentionsAutocomplete,\n  RichMentionsContext,\n  RichMentionsProvider,\n} from 'react-rich-mentions';\n```\n\n- `RichMentionsProvider` - Feed it with your components and the mention configs\n- `RichMentionsInput` - The div[contenteditable] used as TextField\n- `RichMentionsAutocomplete` - The default Autocomplete component given with the library (can be overwritten)\n- `RichMentionsContext` - Use it to create your own Autocomplete or custom controller.\n\nExample:\n\n```tsx\nconst configs = [\n  {\n    // The fragment to transform to readable element.\n    // For example, slack is using `\u003c[name]|[id]\u003e` -\u003e `\u003cvince|U82737823\u003e`\n    match: /\u003c(@\\w+)\\|([^\u003e]+)\u003e/g,\n\n    // Use it in combinaison with .match to choose what to display to your user instead of the fragment\n    // Given the regex `/\u003c(@\\w+)\\|([^\u003e]+)\u003e/g` and the fragment `\u003cvince|U82737823\u003e`\n    // - $\u0026 -\u003e \u003cvince|U82737823\u003e\n    // - $1 -\u003e vince\n    // - $2 -\u003e U82737823\n    matchDisplay: '$1',\n\n    // The query that will start the autocomplete\n    // In this case it will match:\n    // - @\n    // - @test\n    // _ @test_\n    // Can be changed to catch spaces or some special characters.\n    query: /@([a-zA-Z0-9_-]+)?/,\n\n    // The function that will search for autocomplete result.\n    // The argument is the searchable text (for example '@test').\n    // It can return a promise. The result have to contains for each item:\n    // - a prop \"ref\" -\u003e let say `\u003c@vince|U23872783\u003e`\n    // - a prop \"name\" -\u003e the display name\n    async onMention(text) {\n      const query = text.substr(1); // remove the '@'\n      const results = await callYourAPI(query);\n\n      return results.map(user =\u003e ({\n        ref: `\u003c@${user.nickname}|${user.id}\u003e`,\n        name: user.nickname,\n      }));\n    },\n\n    // Called to customize visual elements inside input.\n    // Can be used to add classes, aria, ...\n    // `final` is a boolean to know if the fragment is resolved still\n    // waiting for user to select an entry in autocomplete\n    customizeFragment(span: HTMLSpanElement, final: boolean) {\n      span.className = final ? 'final' : 'pending';\n    },\n  },\n];\n\nconst MyComponent = () =\u003e {\n  const ref = useRef();\n  const onClear = () =\u003e ref.current.setValue('');\n  const onSubmit = () =\u003e {\n    console.log(ref.current.getTransformedValue());\n  };\n\n  return (\n    \u003cRichMentionsProvider configs={configs} getContext={ref}\u003e\n      \u003cRichMentionsInput defaultValue=\"The default Text\" /\u003e\n      \u003cRichMentionsAutocomplete fixed={false} /\u003e\n      \u003cbutton type=\"button\" onClick={onSubmit}\u003e\n        Send\n      \u003c/button\u003e\n      \u003cbutton type=\"reset\" onClick={onClear}\u003e\n        Clear\n      \u003c/button\u003e\n    \u003c/RichMentionsProvider\u003e\n  );\n};\n```\n\n### RichMentionsInput props\n\n| Prop name    | Type   | Default value | Description                                        |\n| ------------ | ------ | ------------- | -------------------------------------------------- |\n| defaultValue | string | `''`          | The default value of the input (cannot be updated) |\n\n### RichMentionsAutocomplete props\n\n| Prop name | Type                 | Default value | Description                                       |\n| --------- | -------------------- | ------------- | ------------------------------------------------- |\n| fixed     | boolean _(optional)_ | `false`       | Is the autocomplete on a fixed position element ? |\n\n### RichMentionsProvider props\n\n| Prop name      | Type                  | Default value | Description                                                           |\n| -------------- | --------------------- | ------------- | --------------------------------------------------------------------- |\n| configs        | TMentionConfig[]      | `undefined`   | List of configs to fetch mentions                                     |\n| getContext     | function _(optional)_ | `undefined`   | Get rich mention context (can be used with a useRef)                  |\n| getInitialHTML | function _(optional)_ | `undefined`   | Can be used to overwrite the function used to preprocess `value` data |\n\n### RichMentionsPublicContext props\n\nThe context returned by `getContext` props.\n\n| Prop name           | Type     | Example                                  | Description                                                                                                                                                                                                                                                                                                                                              |\n| ------------------- | -------- | ---------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| getTransformedValue | function | `const text = ctx.getTransformedValue()` | Get the input value with fragment transformed to valid code                                                                                                                                                                                                                                                                                              |\n| setValue            | function | `ctx.setValue('Hello \u003c@world\\|U15151\u003e')` | Change the input value, will transform the code with valid fragment. It's possible to insert HTML so make sure to sanitize your user's input. Note that for a valid html to be set, you will have to add the following html attribute so it's not remove from the engine `data-rich-mentions=\":smile:\"` where \":smile:\" is the final extracted reference |\n| insertFragment      | function | `ctx.insertFragment('\u003c@world\\|U45454\u003e')` | Add a fragment at the current cursor position                                                                                                                                                                                                                                                                                                            |\n\n## Building Locally\n\nAfter cloning the repository, install all dependencies :\n\n```\nyarn\n```\n\nor\n\n```\nnpm install\n```\n\n### Testing\n\nTo test this project, we use cypress : https://docs.cypress.io/guides/overview/why-cypress.html\n\n```\ncd ./examples\nyarn (OR npm install)\ncd ..\nyarn cypress:headless\n```\n\nIf you develop a new feature, be sure to add tests in the `cypress` folder, following documentation from the above website.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkoala-interactive%2Freact-rich-mentions","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkoala-interactive%2Freact-rich-mentions","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkoala-interactive%2Freact-rich-mentions/lists"}