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;
}

| Attribute | Required | Type | Default | Description | | :--------------- | :------: | :------------------------------------: | :-----: | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | ref | - | React.RefObject<HTMLTextAreaElement> | null | Use this when you want to refer to a textarea element. | | rows | - | number | 3 | Specifying rows for textarea. | | cols | - | number | 40 | Specifying cols for textarea. | | style | - | React.CSSProperties | null | Specifying the style of a textarea. | | placeholder | - | string | null | Specifying a placeholder for a textarea. | | showPicker | - | boolean | false | Toggle the display of emoji-mart's Picker. | | emojiPickerProps | - | PickerProps | null | Specify the props for emoji-mart's Picker. onSelect is used in react-emoji-textarea. | | onClick | - | function | null | Function to determine that a textarea field has been clicked. | | onSuggesting | - | function | null | Function to determine while an emoji input candidate is displayed. | | onChange | ✅ | function | null | Function used to get the content of the textarea. |

🔨 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 [email protected]: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