{"id":26763742,"url":"https://github.com/dreamyguy/react-emojis","last_synced_at":"2025-04-15T11:48:03.520Z","repository":{"id":39954457,"uuid":"189490181","full_name":"dreamyguy/react-emojis","owner":"dreamyguy","description":":rocket: :hamster: :tada: Render scalable emojis with proper accessibility markup","archived":false,"fork":false,"pushed_at":"2023-05-01T06:27:35.000Z","size":3080,"stargazers_count":34,"open_issues_count":7,"forks_count":3,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-04-06T22:47:07.969Z","etag":null,"topics":["accessibility","accessible-components","accessible-emoji","emoji","emojis","react-emoji","react-emojis"],"latest_commit_sha":null,"homepage":"https://dreamyguy.github.io/react-emojis/","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/dreamyguy.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-05-30T22:23:50.000Z","updated_at":"2024-10-08T08:55:03.000Z","dependencies_parsed_at":"2024-06-18T22:35:17.447Z","dependency_job_id":"3d92129b-ab20-4c64-a2ec-b333a836604a","html_url":"https://github.com/dreamyguy/react-emojis","commit_stats":{"total_commits":34,"total_committers":1,"mean_commits":34.0,"dds":0.0,"last_synced_commit":"91bf57a5bd889aba15092def5a0e78637db94f4c"},"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dreamyguy%2Freact-emojis","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dreamyguy%2Freact-emojis/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dreamyguy%2Freact-emojis/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dreamyguy%2Freact-emojis/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dreamyguy","download_url":"https://codeload.github.com/dreamyguy/react-emojis/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249066105,"owners_count":21207392,"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":["accessibility","accessible-components","accessible-emoji","emoji","emojis","react-emoji","react-emojis"],"created_at":"2025-03-28T19:34:40.088Z","updated_at":"2025-04-15T11:48:03.502Z","avatar_url":"https://github.com/dreamyguy.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![Moments](https://raw.githubusercontent.com/dreamyguy/react-emojis/master/docs/react-emojis-logo-github-full-width.png \"Render scalable emojis with proper accessibility markup\")\n\n# react-emojis\n\n\u003e :rocket: :hamster: :tada: Render all current emojis with proper accessibility markup, on any size\n\n[![MIT Licence](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/dreamyguy/react-emojis/blob/master/LICENSE)\n\nUse **react-emojis** to output the recommended markup for accessible emojis:\n\n```javascript\n\u003cEmoji emoji=\"woman-dancing\"/\u003e\n```\n\n...outputs:\n\n\n```html\n\u003cspan role=\"img\" aria-label=\"woman dancing\" class=\"react-emojis\" style=\"line-height: 1;\"\u003e💃\u003c/span\u003e\n```\n\n## The emojis :tada: :balloon: :unicorn:\n\nInstead of maintaining a list of _emojis_ on this README, I decided it would be best to create a living github page, that would serve both as a way of showcase the _emojis_, the **Emoji** component and facilitate their use:\n\nhttps://dreamyguy.github.io/react-emojis/\n\nOn this page you can:\n\n- Search for _emojis_\n- Copy the _emoji_ to the clipboard by clicking on your choice\n- Choose what you'd like to copy to the clipboard:\n    - **emoji**: The 'emoji' itself _(this is the default option)_.\n    - **markup**: Accessible emoji markup.\n    - **reactEmojis**: **Emoji** component markup _(based on \"react-emojis\" usage)_.\n    - **nameUrl**: Emoji name _(the reference used by \"react-emojis\")_.\n    - **name**: Emoji name _(CLDR formatting)_.\n    - **code**: Emoji's Unicode.\n    - **id**: The emoji's id, as set by unicode.org.\n\n## Line-height\n\n**The emoji will get `line-height: 1` by default**. You can override that behavior by:\n\n- Setting a custom `line-height` to the class `react-emojis`, which the markup output provides out of the box.\n- Passing a `lineHeight` _prop_ to the component.\n\nThe latter can be done as follows:\n\n```javascript\n\u003cEmoji emoji=\"woman-dancing\" lineHeight=\"inherit\"/\u003e\n```\n\nThis will give the emoji the `line-height` _from its parent_.\n\n\u003e One could also pass any valid value to it, as `1.2`, `20px`, etc. There's no validity check here so make sure you pass a valid value.\n\n## Scaling\n\n**The emoji will inherit the font size set by the parent element**. You can override that behavior by:\n\n- Setting a `font-size` to the class `react-emojis`, which the markup output provides out of the box.\n- Passing a `size` _prop_ to the component.\n\nThe latter can be done as follows:\n\n```javascript\n\u003cEmoji emoji=\"woman-dancing\" size=\"100\"/\u003e\n```\n\nThis will give the emoji `100px` _**font-size**_.\n\n\u003e I'll be working on passing units to the component, so one can scale the emoji in whichever way one prefers. For convenience, the default unit will remain `px` if no `sizeUnit` is passed as _prop_.\n\n## Origin\n\nThe [emoji list](https://github.com/dreamyguy/react-emojis/blob/master/src/app/components/EmojiData.js) is based on [unicode.org](https://unicode.org/emoji/charts/full-emoji-list.html)'s current list of named emojis under \"browser\" column (as of 2019-05-30).\n\n# Using _react-emojis_ through `npm`\n\n**react-emojis** is also [available as a package on `npm`](https://www.npmjs.com/package/react-emojis) and can be installed as a depedency with:\n\n    npm i react-emojis --save\n\nAs with any node module, first you'll have to import it with `require`:\n\n```javascript\nvar Emoji = require('react-emojis');\n```\n\n...but in a modern **React** implementation you'll be using `import`:\n\n```javascript\nimport Emoji from 'react-emojis';\n```\n\n_**A note on size**. With **1719** emoji definitions, this package is by no means small..._\n\n\u003e `react-emojis` only worked properly as a `npm` from version `v1.0.4`. If you're reading this it's no longer a problem. :tada:\n\n# Development\n\n## Getting started\n\nClone this repo locally. You'll need to have [NodeJS][1] installed. Install all dependencies by running:\n\n    npm i\n\n## Run it locally\n\nTo start the app locally, run:\n\n    npm run start\n\nThis command fires up the application on port `9900`, making it visible on http://localhost:9900. Because this app is based on [create-react-app][2], the port number should be configured on the [.env](https://github.com/dreamyguy/react-emojis/blob/master/.env#L1) file.\n\n## Building the frontend for Production\n\nWhen you're ready to build for production, run:\n\n     npm run build\n\nThis command compiles all production-optimised resources to a folder called **build**. It's meant to be run remotely, at the environment host, at build time.\n\n## License\n\n[MIT](LICENSE)\n\n# About\n\n**react-emojis** was put together by [Wallace Sidhrée][1]. 👨‍💻🇳🇴\n\n  [1]: http://sidhree.com/\n  [2]: https://facebook.github.io/create-react-app/\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdreamyguy%2Freact-emojis","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdreamyguy%2Freact-emojis","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdreamyguy%2Freact-emojis/lists"}