vito-mohagheghian / react-customizable-emojibox

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

react-customizable-emojibox

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

Demo

Live Demo

Install

npm install react-customizable-emojibox

or

yarn add react-customizable-emojibox

Usage

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 (
    <div>
      <input type='text' placeholder='type a messege' ref={inputRef} />
      <div className='emoji-container'>
        <button onClick={emojiHandler} className='emoji_button'>
          emoji
        </button>
        <EmojiBox
          visibility={emoji}
          setVisibility={setEmoji}
          EmojiClickedHandler={EmojiClickedHandler}
        />
      </div>
    </div>
  )
}

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.

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.

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 me to make new theme.

License

MIT © vito-mohagheghian