{"id":17706203,"url":"https://github.com/mohammad-mghn/react-customizable-emojibox","last_synced_at":"2025-10-28T04:08:36.429Z","repository":{"id":55124289,"uuid":"522880111","full_name":"mohammad-mghn/react-customizable-emojibox","owner":"mohammad-mghn","description":"Easy customizable emojibox component for react applications created by vito.mohagheghian","archived":false,"fork":false,"pushed_at":"2022-08-09T11:46:16.000Z","size":13914,"stargazers_count":5,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-10T04:36:02.419Z","etag":null,"topics":["emtions","eslint","material-ui","npm-package","prettier","react","styled-components","webpack","yarn"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mohammad-mghn.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}},"created_at":"2022-08-09T09:15:43.000Z","updated_at":"2024-10-26T13:18:19.000Z","dependencies_parsed_at":"2022-08-14T12:40:50.391Z","dependency_job_id":null,"html_url":"https://github.com/mohammad-mghn/react-customizable-emojibox","commit_stats":null,"previous_names":["mohammad-mghn/react-customizable-emojibox","vito-mohagheghian/react-customizable-emojibox"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/mohammad-mghn/react-customizable-emojibox","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mohammad-mghn%2Freact-customizable-emojibox","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mohammad-mghn%2Freact-customizable-emojibox/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mohammad-mghn%2Freact-customizable-emojibox/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mohammad-mghn%2Freact-customizable-emojibox/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mohammad-mghn","download_url":"https://codeload.github.com/mohammad-mghn/react-customizable-emojibox/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mohammad-mghn%2Freact-customizable-emojibox/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":281382494,"owners_count":26491320,"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","status":"online","status_checked_at":"2025-10-28T02:00:06.022Z","response_time":60,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["emtions","eslint","material-ui","npm-package","prettier","react","styled-components","webpack","yarn"],"created_at":"2024-10-24T23:20:59.787Z","updated_at":"2025-10-28T04:08:36.402Z","avatar_url":"https://github.com/mohammad-mghn.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# \u003cimg src=\"https://slackmojis.com/emojis/48486-boss-emoji/download\" width=\"25\"/\u003e react-customizable-emojibox\n\neasy customizable emojibox component for react applications created by [vito.mohagheghian](https://github.com/vito-mohagheghian)\n\n## Demo\n\n![Preview](/preview/preview.gif)\n\n\u003e [Live Demo](https://google/com)\n\n## Install\n\n```bash\nnpm install react-customizable-emojibox\n\nor\n\nyarn add react-customizable-emojibox\n```\n\n## Usage\n\n```jsx\nimport React, { useState, useRef } from 'react'\n\nimport EmojiBox from 'react-customizable-emojibox'\nimport 'react-customizable-emojibox/dist/index.css'\n\nconst Example = () =\u003e {\n  const [emoji, setEmoji] = useState(false)\n\n  const emojiHandler = () =\u003e {\n    setEmoji((prevValue) =\u003e !prevValue)\n  }\n\n  const inputRef = useRef(null)\n\n  const EmojiClickedHandler = (char) =\u003e {\n    inputRef.current.value += char\n  }\n\n  return (\n    \u003cdiv\u003e\n      \u003cinput type='text' placeholder='type a messege' ref={inputRef} /\u003e\n      \u003cdiv className='emoji-container'\u003e\n        \u003cbutton onClick={emojiHandler} className='emoji_button'\u003e\n          emoji\n        \u003c/button\u003e\n        \u003cEmojiBox\n          visibility={emoji}\n          setVisibility={setEmoji}\n          EmojiClickedHandler={EmojiClickedHandler}\n        /\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n  )\n}\n\nexport default Example\n```\n\n### Accepted props\n\n| Name                | Type       | Default Value | Required? | Description                                            |\n| ------------------- | ---------- | ------------- | --------- | ------------------------------------------------------ |\n| className           | className  | `undefined`   | No        | Help you to customize it easily.                       |\n| theme               | `Object`   | GlassTheme    | No        | some predesigned themes which I explained in next part |\n| visibility          | `Boolean`  | false         | Yes       | state that manage package display                      |\n| setVisibility       | `Function` | undefined     | Yes       | function of visibility useState                        |\n| EmojiClickedHandler | `Function` | undefined     | Yes       | run on clicking emoji                                  |\n| style               | `Object`   | undefined     | No        | like regular style                                     |\n\n### Theme Prop useage\n\nFirst, you have to import you intended theme from package.\n\n```jsx\nimport { DarkTheme } from 'react-customizable-emojibox'\n```\n\nthemes you import are:\nDarkTheme - LightTheme - GlassTheme - MaterialTheme\n\nafter that you just have set theme prop with the value of imported theme.\n\n![Preview](https://images2.imgbox.com/c1/3c/k1OaOAAs_o.png)\n\n## Responsive\n\nfor make package responsive you have use className prop which is like regular className, and with @media make it resposive.\n\n## FAQ\n\n#### How to change emojibox position?\n\nuse className prop and use transform: transalte(X%, Y%) in your css file.\n\n#### can I have new theme?\n\nyes, as its name you can customize it, or [email](mailto:vito.mohagheghian@gmail.com) me to make new theme.\n\n## License\n\nMIT © [vito-mohagheghian](https://github.com/vito-mohagheghian)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmohammad-mghn%2Freact-customizable-emojibox","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmohammad-mghn%2Freact-customizable-emojibox","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmohammad-mghn%2Freact-customizable-emojibox/lists"}