{"id":13715628,"url":"https://github.com/tommoor/react-emoji-render","last_synced_at":"2025-05-16T03:06:59.219Z","repository":{"id":19620476,"uuid":"87496293","full_name":"tommoor/react-emoji-render","owner":"tommoor","description":"Normalize and render emoji's the way your users expect.","archived":false,"fork":false,"pushed_at":"2023-10-31T20:05:36.000Z","size":878,"stargazers_count":334,"open_issues_count":14,"forks_count":66,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-05-10T04:47:50.858Z","etag":null,"topics":["emoji","react","react-component"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/tommoor.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-04-07T02:34:20.000Z","updated_at":"2025-03-24T01:51:32.000Z","dependencies_parsed_at":"2024-06-18T12:34:25.020Z","dependency_job_id":"483af950-bf6a-45f0-b50c-62378cbe3e85","html_url":"https://github.com/tommoor/react-emoji-render","commit_stats":{"total_commits":141,"total_committers":19,"mean_commits":7.421052631578948,"dds":"0.46808510638297873","last_synced_commit":"f38c907ea54bab49677f25cafbff3cb5f6c4bb19"},"previous_names":[],"tags_count":26,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tommoor%2Freact-emoji-render","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tommoor%2Freact-emoji-render/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tommoor%2Freact-emoji-render/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tommoor%2Freact-emoji-render/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tommoor","download_url":"https://codeload.github.com/tommoor/react-emoji-render/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254295596,"owners_count":22047103,"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":["emoji","react","react-component"],"created_at":"2024-08-03T00:01:01.278Z","updated_at":"2025-05-16T03:06:54.210Z","avatar_url":"https://github.com/tommoor.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"[![npm version](https://badge.fury.io/js/react-emoji-render.svg)](https://badge.fury.io/js/react-emoji-render) ![Tests](https://github.com/tommoor/react-emoji-render/actions/workflows/test.yml/badge.svg)\n\n# react-emoji-render\n\nNormalize and render emoji's the way your users expect.\n\n- Supports unicode emoji characters\n- Supports emoticons such as :) :x :/\n- Supports slack-style emoji names such as `:smile:`\n- Choose between native, twemoji, emojione or custom image sets.\n- Add custom styles when text contains only emoji (to make it bigger, of course)\n\n[Live Demo on CodeSandbox](https://codesandbox.io/s/exciting-ives-vwe5g)\n\n## Installation\n\nInstall with your favorite package manager:\n\n```\nnpm install react-emoji-render --save\n```\n\n```\nyarn add react-emoji-render\n```\n\n## Basic Usage\n\nBy default the component will normalize all of the different emoji notations to\nnative unicode characters.\n\n```javascript\nimport Emoji from \"react-emoji-render\";\n\n\u003cEmoji text=\"This ❤️ sentence includes :+1: a variety of emoji types :)\" /\u003e;\n\n// or as a child\n\u003cEmoji\u003e\n  This ❤️ sentence includes :+1: a variety of emoji types :)\n\u003cEmoji/\u003e;\n```\n\n### Twemoji\n\n[Twemoji](https://github.com/twitter/twemoji) is an emoji set designed by Twitter,\nyou can use the included `Twemoji` component to render emoji images in this style.\n\n```javascript\nimport { Twemoji } from 'react-emoji-render';\n\n\u003cTwemoji text=\"This ❤️ sentence includes :+1: a variety of emoji types :)\" /\u003e\n\n// or, for svg images:\n\u003cTwemoji svg text=\"This ❤️ sentence includes :+1: a variety of emoji types :)\" /\u003e\n```\n\n### Emojione\n\n[Emojione](https://github.com/Ranks/emojione) is a great looking open source emoji set,\nyou can use the included `Emojione` component to render emoji images in this style.\n\n```javascript\nimport { Emojione } from 'react-emoji-render';\n\n\u003cEmojione text=\"This ❤️ sentence includes :+1: a variety of emoji types :)\" /\u003e\n\n// or, for svg images:\n\u003cEmojione svg text=\"This ❤️ sentence includes :+1: a variety of emoji types :)\" /\u003e\n\n// or, for Emojione v4\n\u003cEmojioneV4 text=\"This ❤️ sentence includes :+1: a variety of emoji types :)\" /\u003e\n// note: only png supported --\u003e\n// https://github.com/emojione/emojione-assets/issues/2\n\n// in v4 size prop can be set at 32, 64 (default) or 128\n\u003cEmojioneV4 size={32} text=\"This ❤️ sentence includes :+1: a variety of emoji types :)\" /\u003e\n```\n\n## Advanced Usage\n\n### Only Emoji\n\nThe className passed as the `onlyEmojiClassName` prop is added when the provided\ntext contains only three or less emoji characters. This allows you to add custom\nstyles in this scenario. For example:\n\n```javascript\n\u003cEmoji text=\":+1:\" onlyEmojiClassName=\"make-emojis-large\" /\u003e\n```\n\n### Array Output\n\nIf you want to do further processing on the output, for example parsing HTML then\nit may be useful to not have the normalized emojis be wrapped in a component.\n\n```javascript\nimport { toArray } from \"react-emoji-render\";\n\n// content is an array of text and emoji components, you can now loop through this\n// array and perform further processing. Avoid using `dangerouslySetInnerHTML`!\nconst content = toArray(\n  \"This ❤️ sentence includes :+1: a variety of emoji types :)\"\n);\n```\n\nThen, for example, you can parse all the text and emojis in a single string like the following:\n\n```javascript\nconst parseEmojis = value =\u003e {\n  const emojisArray = toArray(value);\n\n  // toArray outputs React elements for emojis and strings for other\n  const newValue = emojisArray.reduce((previous, current) =\u003e {\n    if (typeof current === \"string\") {\n      return previous + current;\n    }\n    return previous + current.props.children;\n  }, \"\");\n\n  return newValue;\n};\n\nparseEmojis(\":)hello\"); // =\u003e \"😃hello\"\n```\n\n### Custom Images\n\nIf you wish to use a custom emoji set / location then you can pass options into\nthe props. One way to achive this is to create a wrapping component which provides\nyour options and exposes a new component, something like:\n\n```javascript\nimport Emoji from \"react-emoji-render\";\n\nfunction MyEmojiRenderer({ children, ...rest }) {\n  const options = {\n    baseUrl: \"https://mycustom.cdn.com/emojis/\",\n    ext: \"svg\",\n  };\n\n  return \u003cEmoji options={options} {...rest} /\u003e;\n}\n```\n\nYou can then use the new component:\n\n```javascript\n\u003cMyEmojiRenderer text=\"This ❤️ sentence includes :+1: a variety of emoji types :)\" /\u003e\n```\n\n## Contributing\n\n### Emojis and aliases\n\nIf our [dataset](data/aliases.js) is missing some emoji, please open an issue specifying which one is missing. The library has a package script (`yarn update-aliases`) that makes it easy to update with the latest emojis at any time. You can directly do it yourself and open a PR as well.\n\nIf you would like to add a new alias to an existing emoji, please find the emoji in our [custom aliases](data/aliases/customAliases.json) file and add the alias to its array of aliases. If you have found a source of aliases that is being actively maintained and you would like to add it, please open an issue to discuss it.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftommoor%2Freact-emoji-render","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftommoor%2Freact-emoji-render","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftommoor%2Freact-emoji-render/lists"}