# amazing-react-emojipicker

> An amazing react emoji picker with more than 500 emojis

Latest version **1.2.8** (published 2022-02-05) · MIT license · 0 weekly downloads

## Install

```sh
npm install amazing-react-emojipicker
pnpm add amazing-react-emojipicker
yarn add amazing-react-emojipicker
bun add amazing-react-emojipicker
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.2.8 |
| Published | 2022-02-05 |
| First published | 2022-01-29 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=10 |
| Dependencies | 1 |
| Unpacked size | 231.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Ahmed Anwar |
| Maintainers | ahmedanwar1 |
| Keywords | emoji-picker, react-emoji-picker, react-emoji, emoji-picker, react, emoji |

## Links

- npm: https://www.npmjs.com/package/amazing-react-emojipicker
- Repository: https://github.com/ahmedanwar1/amazing-react-emoji-picker
- Homepage: https://github.com/ahmedanwar1/amazing-react-emoji-picker#readme
- Issues: https://github.com/ahmedanwar1/amazing-react-emoji-picker/issues
- npm.io page: https://npm.io/package/amazing-react-emojipicker

## Dependencies (1)

- [rollup-plugin-postcss](https://npm.io/package/rollup-plugin-postcss.md) ^4.0.2

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.2.8 (latest) — 2022-02-05
- 1.2.7 — 2022-01-31
- 1.2.6 — 2022-01-31
- 1.2.5 — 2022-01-30
- 1.2.4 — 2022-01-30
- 1.2.3 — 2022-01-30
- 1.2.2 — 2022-01-30
- 1.2.1 — 2022-01-30
- 1.2.0 — 2022-01-30
- 1.1.2 — 2022-01-30
- 1.1.1 — 2022-01-30
- 1.1.0 — 2022-01-30
- 1.0.9 — 2022-01-30
- 1.0.8 — 2022-01-30
- 1.0.7 — 2022-01-30
- … 7 more at https://npm.io/package/amazing-react-emojipicker/versions

## README

# Amazing React Emoji Picker

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

<img src="./emojipickercover.png" width="800"/>

<br />

## Install

```console
#npm
npm install amazing-react-emojipicker

#yarn
yarn add amazing-react-emojipicker
```

<br />

## 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 (
    <div>
      {/* input field that emojis will be added to*/}
      <input type="text" ref={inputRef} />

      {/*Emoji picker component*/}
      <AmazingEmojiPicker
        darkMode={true}
        ref={inputRef}
        visibility={toggle}
        setVisibility={setToggle}
        top={10}
        left={20}
      />

      {/*emoji icon to open and close the picker*/}
      <img src="./emoji-icon.png" onClick={() => setToggle(!toggle)} />
    </div>
  );
};

export default TestComponent;
```

<br />

## 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)

---
_Source: https://npm.io/package/amazing-react-emojipicker · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._