https://github.com/ahmedanwar1/amazing-react-emoji-picker

An amazing react emoji picker with more than 500 emojis included in the package.
https://github.com/ahmedanwar1/amazing-react-emoji-picker

emoji emoji-picker emojis emoticon emoticon-picker emoticons npm npm-package picker react react-emoji react-emojis react-picker reactsjs

Last synced: 19 days ago
JSON representation

An amazing react emoji picker with more than 500 emojis included in the package.

• Host: GitHub
• URL: https://github.com/ahmedanwar1/amazing-react-emoji-picker
• Owner: ahmedanwar1
• License: mit
• Created: 2022-01-29T21:30:27.000Z (almost 3 years ago)
• Default Branch: main
• Last Pushed: 2022-02-05T17:33:10.000Z (almost 3 years ago)
• Last Synced: 2024-10-17T21:30:37.936Z (29 days ago)
• Topics: emoji, emoji-picker, emojis, emoticon, emoticon-picker, emoticons, npm, npm-package, picker, react, react-emoji, react-emojis, react-picker, reactsjs
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/amazing-react-emojipicker
• Size: 472 KB
• Stars: 0
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Amazing React Emoji Picker

An amazing react emoji picker with more than 500 emojis included in the package.






## Install

```console

#npm

npm install amazing-react-emojipicker

#yarn

yarn add amazing-react-emojipicker

```




## Usage basic

```js

import { useRef, useState } from 'react';

import AmazingEmojiPicker from 'amazing-react-emojipicker';

const TestComponent = () => {

  const inputRef = useRef();

  const [toggle, setToggle] = useState(false);

  return (

    


      {/* input field that emojis will be added to*/}

      


      {/*Emoji picker component*/}

      

      {/*emoji icon to open and close the picker*/}

       setToggle(!toggle)} />

    

  );

};


export default TestComponent;

```




## Props details

| Prop            | Required | Description                                                |

| :-------------- | :------: | :--------------------------------------------------------- |

| `darkMode`      |    ✓     | Set the default theme to dark mode.                        |

| `ref`           |    ✓     | Ref of the input which emojis will be added in. (`useRef`) |

| `visibility`    |    ✓     | The initail visibility of the picker.                      |

| `setVisibility` |    ✓     | Toggle the picker by the set function of `useState`.       |

| `top`           |    -     | Set the top position of the picker.                        |

| `right`         |    -     | Set the right position of the picker.                      |

| `left`          |    -     | Set the left position of the picker.                       |

| `bottom`        |    -     | Set the bottom position of the picker.                     |

## License

[MIT](./LICENSE)