npm.io
1.2.8 • Published 4 years ago

amazing-react-emojipicker

Licence
MIT
Version
1.2.8
Deps
1
Size
232 kB
Vulns
0
Weekly
0

Amazing React Emoji Picker

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


Install

#npm
npm install amazing-react-emojipicker

#yarn
yarn add amazing-react-emojipicker

Usage basic

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;

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

Keywords