Emoji Picker Reusable Components Writed with ReactJS and VueJS

Emoji Picker Reusable Components Writed with ReactJS and VueJS

Emoji picker reusable components writed with React 📘, Vue 📗 - This component is created to work with ReactJs and VueJS.

This is image title

✅ Description

Emoji picker component to selected emojis and search by groups. This component is created to work with ReactJs and VueJS.

✅ Features

  • Search emojis by tag name
  • Selected emoji
  • View recent emojis selected
  • Filter emojis by group

✅ Installation

After you clone this repository, go to respective folder and run the command "npm install" or "yarn install". Once the dependencies are installed, yo run the next command according to the technology:

  • ReactJS:

    > npm start

    Example:

    import React, { useState } from "react";
    import ReactEmojiPicker from "@bit/personal-dev.emoji-picker.react-emoji-picker";
    
    function App() {
      const [emoji, setEmoji] = useState("");
      return (
        <div>
          <h1>{emoji}</h1>
          <ReactEmojiPicker onSelected={(currentEmoji) => {
              setEmoji(currentEmoji);
            }}
          />
        </div>
      );
    }
  • VueJS:

    > npm start

    Example:

    Using Vue 2

    <template>
      <div>
        <h1>{{emoji}}</h1>
        <vue-emoji-picker @on-selected="onSelectedEmoji"></vue-emoji-picker>
      </div>
    </template>
    <script>
      import VueEmojiPicker from "@bit/personal-dev.emoji-picker.vue-emoji-picker";
      export default {
        components: {
          VueEmojiPicker,
        },
        data() {
          return {
            emoji: "",
          };
        },
        methods: {
          onSelectedEmoji(emoji) {
            this.emoji = emoji;
          },
        },
      };
    </script>

    Using Vue 3

    <template>
      <div>
        <h1>{{emoji}}</h1>
        <vue-emoji-picker @on-selected="onSelectedEmoji"></vue-emoji-picker>
      </div>
    </template>
    <script>
      import { defineComponent, ref } from "vue";
      import VueEmojiPicker from '@bit/personal-dev.emoji-picker.vue-emoji-picker';
      export default defineComponent({
        components: {
          VueEmojiPicker
        },
        setup() {
          const emoji = ref("");
          const onSelectedEmoji = (currentEmoji) => {
            emoji.value = currentEmoji;
          }
    
          return {
            emoji,
            onSelectedEmoji
          }
        }
      });
    </script>

Download Details:

Author: jhony-24 Live Demo: View The Demo Download Link: Download The Source Code Official Website: https://github.com/jhony-24/emoji-pickers

vue react javascript

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

How native is React Native? | React Native vs Native App Development

Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.

Barcode Components for JavaScript, Angular, React, and Vue

In this article, we will examine the new barcode components available in the Wijmo 2020 v2 release. Barcodes represent data in a visual, but machine-readable way. Let's take a look at each of the new barcode components.

Vue vs. React vs. Angular: Which JavaScript Framework is Right for You

Vue vs React vs Angular: Which JavaScript Framework is Right for You. JavaScript is a high-level programming language. Both front-end and back-end development can be conducted with JavaScript. Vue provides higher customizability and hence is easier to learn than Angular or React. Further, Vue has an overlap with Angular and React with respect to their functionality like the use of components.

Which Javascript Framework should I use with Ionic - Angular, React or Vue?

You want to get started with Ionic and are unsure which Javascript framework with Ionic you should pick? Or do you think about switching from the one you currently use? In this video I explain the differences and things you need to think about when selecting your framework for Ionic! Which Javascript Framework should I use with Ionic - Angular, React or Vue?

React.js vs Vue.js: Which Is The Best Framework / Library? Comparing Apps React vs Vue 2021

Vue.js vs React, that is the question. Which framework/library is the best? In this video I look at two applications and we compare and contrast Vue.js and React.js and see which one is the best !