@nikaera/react-emoji-textarea v1.0.1

react-emoji-textarea 😆💖

You can use Slack-like emoji shortcuts on textarea! 🦸‍♂️⌨️

🛠️ Requirement

• Node.js 14.10.1
• React 17.0.8
• Emoji Mart 3.0.4

💾 Installation

Install the plugin via Yarn (recommended)

yarn add @nikaera/react-emoji-textarea

or via NPM

npm i @nikaera/react-emoji-textarea

🏃 Getting Started

Include component

import ReactEmojiTextArea from "@nikaera/react-emoji-textarea";

Make some elegant textarea

<ReactEmojiTextArea
  style={{ fontSize: "1em" }}
  ref={textAreaEl}
  onChange={(text) => console.log(text)}
  placeholder={"Try typing emoji like a Slack shortcut! 😆💖"}
  emojiPickerProps={{
    showSkinTones: true,
  }}
/>

🛠️ Configuring the plugin

Props for ReactEmojiTextArea include the following, which you can customize as you see fit. 🤵

export interface EmojiTextAreaProps {
  ref?: React.RefObject<HTMLTextAreaElement>;
  rows?: number;
  cols?: number;
  style?: React.CSSProperties;
  placeholder?: string;
  showPicker?: boolean;
  emojiPickerProps?: PickerProps;
  onClick?: (e: React.MouseEvent<HTMLTextAreaElement>) => void;
  onSuggesting?: (val: boolean) => void;
  onChange: (val: string) => void;
}

🔨 How to develop

1. Use create-react-app to create a typescript project for react-emoji-textarea development.
2. Clone react-emoji-textarea with git clone git@github.com:nikaera/react-emoji-textarea.git.
3. Go into the react-emoji-textarea folder and run yarn or npm install to install the necessary libraries.
4. Run npm link or yarn link to link from the project you created in step 1. for development.
5. Add "react-emoji-textarea": "link:<1.'s project path>" to dependencies in package.json of the project created in 1..
6. Go into the react-emoji-textarea folder and run yarn build:watch or npm run build:watch to continue to be compiled for development.
7. Run yarn start or npm start in the project folder created in 1. to develop react-emoji-textarea.

🎁 Contributing

If you have any questions, please feel free to create an Issue or PR for you! 🙌

License

MIT