https://github.com/mohammad-mghn/react-customizable-emojibox

Easy customizable emojibox component for react applications created by vito.mohagheghian
https://github.com/mohammad-mghn/react-customizable-emojibox

emtions eslint material-ui npm-package prettier react styled-components webpack yarn

Last synced: 2 months ago
JSON representation

Easy customizable emojibox component for react applications created by vito.mohagheghian

• Host: GitHub
• URL: https://github.com/mohammad-mghn/react-customizable-emojibox
• Owner: mohammad-mghn
• License: gpl-3.0
• Created: 2022-08-09T09:15:43.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2022-08-09T11:46:16.000Z (over 2 years ago)
• Last Synced: 2024-10-11T03:56:29.412Z (2 months ago)
• Topics: emtions, eslint, material-ui, npm-package, prettier, react, styled-components, webpack, yarn
• Language: JavaScript
• Homepage:
• Size: 13.3 MB
• Stars: 4
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: license.md

Awesome Lists containing this project

README

        
#  react-customizable-emojibox

easy customizable emojibox component for react applications created by [vito.mohagheghian](https://github.com/vito-mohagheghian)

## Demo

![Preview](/preview/preview.gif)

> [Live Demo](https://google/com)

## Install

```bash

npm install react-customizable-emojibox

or

yarn add react-customizable-emojibox

```

## Usage

```jsx

import React, { useState, useRef } from 'react'

import EmojiBox from 'react-customizable-emojibox'

import 'react-customizable-emojibox/dist/index.css'

const Example = () => {

  const [emoji, setEmoji] = useState(false)

  const emojiHandler = () => {

    setEmoji((prevValue) => !prevValue)

  }

  const inputRef = useRef(null)

  const EmojiClickedHandler = (char) => {

    inputRef.current.value += char

  }

  return (

    


      

      


        

          emoji

        

        

      

    

  )

}


export default Example

```

### Accepted props

| Name                | Type       | Default Value | Required? | Description                                            |

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

| className           | className  | `undefined`   | No        | Help you to customize it easily.                       |

| theme               | `Object`   | GlassTheme    | No        | some predesigned themes which I explained in next part |

| visibility          | `Boolean`  | false         | Yes       | state that manage package display                      |

| setVisibility       | `Function` | undefined     | Yes       | function of visibility useState                        |

| EmojiClickedHandler | `Function` | undefined     | Yes       | run on clicking emoji                                  |

| style               | `Object`   | undefined     | No        | like regular style                                     |

### Theme Prop useage

First, you have to import you intended theme from package.

```jsx

import { DarkTheme } from 'react-customizable-emojibox'

```

themes you import are:

DarkTheme - LightTheme - GlassTheme - MaterialTheme

after that you just have set theme prop with the value of imported theme.

![Preview](https://images2.imgbox.com/c1/3c/k1OaOAAs_o.png)

## Responsive

for make package responsive you have use className prop which is like regular className, and with @media make it resposive.

## FAQ

#### How to change emojibox position?

use className prop and use transform: transalte(X%, Y%) in your css file.

#### can I have new theme?

yes, as its name you can customize it, or [email](mailto:[email protected]) me to make new theme.

## License

MIT © [vito-mohagheghian](https://github.com/vito-mohagheghian)