lotphy / react-emoji-textarea

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

react-emoji-textarea 😆💖

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

🔨 Minimum requirements

• Node.js 14.10.1
• React 17.0.8
• @nikaera/react-emoji-textarea

💾 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