smiley-input 😄😎✅👀

smiley-input is a React component that enables users to input text and emojis effortlessly. This component is ideal for chat applications, social media platforms, and any interactive applications where emoji input is required.

Live Demo

Check out the Live Demo here.

Watch the video demo on YouTube.

Features

• Easy integration into any React application

• Customizable emoji picker

• Supports emoji insertion at the cursor position

• Responsive design for different screen sizes

• Configurable emoji picker options

• Styled with Tailwind CSS

Installation

To install the package, run the following command:

1
2npm install smiley-input
3

or using yarn/bun:

1
2yarn add smiley-input || bun add  smiley-input
3

Usage

Here is a simple example to get you started with smiley-input:

Import the Component

1import React, { useState } from "react";
2
3import { SmileyInput } from "smiley-input";
4
5const App = () => {
6  const [message, setMessage] = useState("");
7
8  const handleSendMessage = (value) => {
9    console.log("Message sent:", value);  # Api Call
10    setMessage("");
11  };
12
13  return (
14    <div className="p-4">
15           {" "}
16      <SmileyInput
17        value={message}
18        setValue={setMessage}
19        keepOpened={true}
20        className="custom-textarea"
21        pickerOptions={{
22          theme: "light",
23        }}
24        emojiButtonElement="😊"
25        emojiButtonClassName="custom-emoji-button h-8 w-8"
26      />
27            <button
28        className="mt-2 px-4 py-2 bg-violet-500 text-white rounded"
29        onClick={() => handleSendMessage(message)}
30      >
31        Send
32      </button>   {" "}
33    </div>
34  );
35};
36
37export default App;

Tailwind CSS Setup

If you haven't already set up Tailwind CSS in your project, follow these steps:

1. Install Tailwind CSS:

1
2npm install -D tailwindcss postcss autoprefixer
3
4npx tailwindcss init -p
5

2. Configure your tailwind.config.js:

1
2// tailwind.config.js
3
4module.exports = {
5
6content: [
7
8'./src/\*_/_.{js,jsx,ts,tsx}',
9
10],
11
12theme: {
13
14extend: {},
15
16},
17
18plugins: [],
19
20}
21

3. Add Tailwind's directives to your CSS file:

1
2/_ styles.css _/
3
4@tailwind base;
5
6@tailwind components;
7
8@tailwind utilities;
9

4. Import the CSS file in your entry point (e.g., index.tsx):

1
2import './styles.css';
3

Example Styles

1
2/* Custom styles for the textarea and emoji button */
3
4.custom-textarea {
5
6  @apply border border-gray-300 p-2 text-base rounded-md;
7
8}
9
10.custom-emoji-button {
11
12  @apply bg-none border-none cursor-pointer text-lg;
13
14}
15

Props

The SmileyInput component accepts the following props:

| Prop                | Type                                            | Description                                              |

|---------------------|-------------------------------------------------|----------------------------------------------------------|

| value             | string                                        | The current value of the input                           |

| setValue          | (value: string) => void                       | Function to update the input value                       |

| keepOpened        | boolean                                       | Keep the emoji picker open after selecting an emoji      |

| className         | string                                        | Custom class name for the input                          |

| pickerOptions     | Omit<EmojiPickerProps, 'data' | 'onEmojiSelect'> | Configuration options for the emoji picker               |

| emojiButtonElement| React.ReactNode                               | Custom element for the emoji button                      |

| emojiButtonClassName| string                                      | Custom class name for the emoji button                   |

Contributing

Contributions are welcome! If you find a bug or have a feature request, please open an issue. If you would like to contribute code, please open a pull request.

License

This project is licensed under the MIT License. See the LICENSE file for details.

---

This README now includes live demo links at the beginning, along with the rest of the essential information to help users get started with smiley-input. If you need any further adjustments or additional information, feel free to ask!