{"id":24108271,"url":"https://github.com/nikaera/react-emoji-textarea","last_synced_at":"2025-05-12T19:41:59.762Z","repository":{"id":57131088,"uuid":"378424669","full_name":"nikaera/react-emoji-textarea","owner":"nikaera","description":"You can use Slack-like emoji shortcuts on textarea! πŸ¦Έβ€β™‚οΈβŒ¨οΈ","archived":false,"fork":false,"pushed_at":"2023-07-09T18:03:31.000Z","size":328,"stargazers_count":5,"open_issues_count":3,"forks_count":4,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-20T02:39:56.303Z","etag":null,"topics":["emoji","react","react-components","react-library","shortcut","textarea","typescript"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/@nikaera/react-emoji-textarea","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nikaera.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-06-19T13:56:44.000Z","updated_at":"2024-05-14T09:44:42.000Z","dependencies_parsed_at":"2022-09-01T00:12:42.605Z","dependency_job_id":null,"html_url":"https://github.com/nikaera/react-emoji-textarea","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nikaera%2Freact-emoji-textarea","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nikaera%2Freact-emoji-textarea/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nikaera%2Freact-emoji-textarea/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nikaera%2Freact-emoji-textarea/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nikaera","download_url":"https://codeload.github.com/nikaera/react-emoji-textarea/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253809448,"owners_count":21967727,"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-components","react-library","shortcut","textarea","typescript"],"created_at":"2025-01-10T23:26:53.694Z","updated_at":"2025-05-12T19:41:59.739Z","avatar_url":"https://github.com/nikaera.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-emoji-textarea πŸ˜†πŸ’–\n\nYou can use **Slack-like emoji shortcuts on textarea!** πŸ¦Έβ€β™‚οΈβŒ¨οΈ\n\n[![Image from Gyazo](https://i.gyazo.com/64f104b34c185872b6a864d4bfd6ad21.gif)](https://gyazo.com/64f104b34c185872b6a864d4bfd6ad21)\n\n## πŸ”¨ Minimum requirements\n\n- [Node.js 14.10.1](https://nodejs.org/)\n- [React 17.0.8](https://ja.reactjs.org/)\n- [@nikaera/react-emoji-textarea](https://github.com/nikaera/react-emoji-textarea)\n\n## πŸ’Ύ Installation\n\nInstall the plugin via Yarn (recommended)\n\n```bash\nyarn add @nikaera/react-emoji-textarea\n```\n\nor via NPM\n\n```bash\nnpm i @nikaera/react-emoji-textarea\n```\n\n## πŸƒ Getting Started\n\n### Include component\n\n```javascript\nimport ReactEmojiTextArea from \"@nikaera/react-emoji-textarea\";\n```\n\n### Make some elegant textarea\n\n```javascript\n\u003cReactEmojiTextArea\n style={{ fontSize: \"1em\" }}\n ref={textAreaEl}\n onChange={(text) =\u003e console.log(text)}\n placeholder={\"Try typing emoji like a Slack shortcut! πŸ˜†πŸ’–\"}\n emojiPickerProps={{\n showSkinTones: true,\n }}\n/\u003e\n```\n\n## πŸ› οΈ Configuring the plugin\n\n`Props` for ReactEmojiTextArea include the following, which you can customize as you see fit. 🀡\n\n```javascript\nexport interface EmojiTextAreaProps {\n ref?: React.RefObject\u003cHTMLTextAreaElement\u003e;\n rows?: number;\n cols?: number;\n style?: React.CSSProperties;\n placeholder?: string;\n showPicker?: boolean;\n emojiPickerProps?: PickerProps;\n onClick?: (e: React.MouseEvent\u003cHTMLTextAreaElement\u003e) =\u003e void;\n onSuggesting?: (val: boolean) =\u003e void;\n onChange: (val: string) =\u003e void;\n}\n```\n\n| Attribute | Required | Type | Default | Description |\n| :--------------- | :------: | :------------------------------------: | :-----: | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| ref | - | `React.RefObject\u003cHTMLTextAreaElement\u003e` | `null` | Use this when you want to refer to a `textarea` element. |\n| rows | - | `number` | 3 | Specifying rows for `textarea`. |\n| cols | - | `number` | 40 | Specifying cols for `textarea`. |\n| style | - | `React.CSSProperties` | `null` | Specifying the style of a `textarea`. |\n| placeholder | - | `string` | `null` | Specifying a placeholder for a `textarea`. |\n| showPicker | - | `boolean` | `false` | Toggle the display of [emoji-mart's Picker](https://github.com/missive/emoji-mart#picker). |\n| emojiPickerProps | - | `PickerProps` | `null` | Specify the `props` for [emoji-mart's Picker](https://github.com/missive/emoji-mart#picker). **[onSelect](https://github.com/nikaera/react-emoji-textarea/blob/main/src/index.tsx#L283) is used in `react-emoji-textarea`.** |\n| onClick | - | `function` | `null` | Function to determine that a `textarea` field has been clicked. |\n| onSuggesting | - | `function` | `null` | Function to determine while an emoji input candidate is displayed. |\n| onChange | βœ… | `function` | `null` | Function used to get the content of the `textarea`. |\n\n## πŸ”¨ How to develop\n\n1. Use [create-react-app](https://create-react-app.dev/docs/adding-typescript/) to create a typescript project for `react-emoji-textarea` development.\n1. Clone `react-emoji-textarea` with `git clone git@github.com:nikaera/react-emoji-textarea.git`.\n1. Go into the `react-emoji-textarea` folder and run `yarn` or `npm install` to install the necessary libraries.\n1. Run `npm link` or `yarn link` to link from the project you created in step `1.` for development.\n1. Add `\"react-emoji-textarea\": \"link:\u003c1.'s project path\u003e\"` to `dependencies` in `package.json` of the project created in `1.`.\n1. Go into the `react-emoji-textarea` folder and run `yarn build:watch` or `npm run build:watch` to continue to be compiled for development.\n1. Run `yarn start` or `npm start` in the project folder created in `1.` to develop `react-emoji-textarea`.\n\n## 🎁 Contributing\n\nIf you have any questions, please feel free to create an [Issue](https://github.com/nikaera/react-emoji-textarea/issues/new) or [PR](https://github.com/nikaera/react-emoji-textarea/pulls) for you! πŸ™Œ\n\n## License\n\n[MIT](https://github.com/nikaera/Teemo/blob/main/LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnikaera%2Freact-emoji-textarea","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnikaera%2Freact-emoji-textarea","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnikaera%2Freact-emoji-textarea/lists"}