Home

Awesome

<p align="center"> <img src="https://raw.githubusercontent.com/PandaSekh/lepre/master/example/public/rabbit.png?token=AIPNRUKQUMFQJYCJ4W53OM3ACALSU" width="100" height="100" alt="Rabbit Emoji"> </p> <h1 align="center"> L.E.P.R.E </h1> <p align="center"> <img src="https://travis-ci.com/PandaSekh/lepre.svg?token=9UEvCKGSQs8hrivJiSpX&branch=master" alt="Travis CI"> <a href="https://www.npmjs.org/package/lepre"><img src="https://img.shields.io/npm/v/lepre.svg" alt="npm"></a> <img src="https://img.badgesize.io/https:/unpkg.com/lepre@latest/dist/index.js?compression=brotli&label=size" alt="Size"> <img src="https://codecov.io/gh/PandaSekh/lepre/branch/master/graph/badge.svg?token=16CDE37WS5" alt="Code Coverage"> <img alt="Dependencies" src="https://img.shields.io/badge/dependencies-none-brightgreene"> </p> <p align="center">🐰 Lightweight Emoji Picker for React Enthusiasts.</p>

Lepre is a lightweight (<1Kb) emoji picker library for React. It's fully customizable and was inspired by Github's reactions.

🔧 Currently in maintenance mode. No new features will be added.🔧

<p align="center"> <img src="https://raw.githubusercontent.com/PandaSekh/lepre/master/example/public/example.gif?token=AIPNRUILOBDDX67IT6RVAIDACCBGK" alt="Lepre Example"> </p>

Install

npm:

npm install --save lepre

Yarn:

yarn add lepre

CDN:

<sript src="https://unpkg.com/lepre@latest/dist/index.js"></script>

Index

Examples

Default Reaction Block

import React from 'react';

import Reactions from 'lepre';

export default function Example() {
  const MY_EMOJIS = [
    { emoji: '🐼', label: 'panda' },
    { emoji: '📞', label: 'cell' },
  ];

  return <Reactions emojis={MY_EMOJIS} selected={SELECTED_EMOJIS}
 />;
}

Custom Component

import React from 'react';
import { EmojiCounter, EmojiPicker, useEmojis } from 'lepre';

const MY_EMOJIS = [
  { emoji: '🐼', label: 'panda' },
  { emoji: '📞', label: 'cell' },
];
export default function CustomReactions() {
  const [emojis, increment] = useEmojis();

  const selected = emojis
    .sort((a, b) => (a.emoji < b.emoji ? 1 : -1)) // No sorting is applied by default
    .map((emoji) => (
      <EmojiCounter
        key={emoji.label}
        emoji={emoji}
        initialValue={emoji.counter}
        onClick={increment}
      />
));


  return (
    <div className='comment'>
      <div className='custom-picker'>
        <EmojiPicker
            availableEmojis={MY_EMOJIS}
            onClick={increment}
            selectedEmojis={emojis}
          />
      </div>
      <p>You can customize the reaction block however you want!</p>
      <div className='custom-selection'>{selected}</div>
    </div>
  );
}

Usage

lepre can be used in two ways, either by importing a single block which handles everything for you, or by importing each component and then do the connections yourself. While the first method is plug and play and easy to get started, the latter will give you more flexibility on the layout.

Default Reaction Block

API Documentation.
To use the Reaction Block, import the default Component from lepre.

import React from 'react';
import Reactions from 'lepre';

This Component only requires an emojis prop to work. emojis is an array of emoji objects which will be available to be selected. Optionally, it also accepts a selected prop, which is an array of emojis already selected, and onUpdate, a callback fired whenever the state is updated.

  const MY_EMOJIS = [
    { emoji: '🐼', label: 'panda' },
    { emoji: '📞', label: 'cell' },
  ];

  const onStateUpdate = newState => console.log(newState)

  return <Reactions emojis={MY_EMOJIS} 
                    selected={SELECTED_EMOJIS} 
                    onUpdate={onStateUpdate}
          />;

Custom Block

To create a Custom Block you have to individually import the three building blocks of this library:

import React from 'react';
import { EmojiCounter, EmojiPicker, useEmojis } from 'lepre';

Then use the useEmojis hook to create a state for the emojis.

const emojisFromDatabase = fetch(...);

const [emojis, increment, decrement] = useEmojis(emojisFromDatabase);

Map the emojis with the EmojiCounter Component.

const mappedEmojis = emojis
  .sort((a, b) => (a.emoji < b.emoji ? 1 : -1)) // This is optional, but recommended
  .map((emoji) => (
    <EmojiCounter
      key={emoji.label}
      emoji={emoji}
      initialValue={emoji.counter}
      onClick={increment}
    />
  ));

Or create your own Component with the Emoji Component.

import React from 'react';
import EmojiComponent from './EmojiComponent.js';

export default function MyCustomEmojiComponent({ emoji, initialValue = 0, increment, decrement }){
  return (
    <span>
      <span onClick={() => increment(emoji)}>Incr</span>
      <span onClick={() => decrement(emoji)}>Decr</span>
      <EmojiComponent emoji={emoji} />
      <div>
        <span>{initialValue}</span>
      </div>
    </span>
  );
}

Finally, render the components however you want.

return (
<div>
  <div>
    <EmojiPicker
      availableEmojis={AVAILABLE_EMOJIS}
      onClick={increment}
      selectedEmojis={emojis}
    />
  </div>
  <p>{YOUR_CONTENT}</p>
  <div>{mappedEmojis}</div>
</div>
);

API


Emoji (Object)

const Emoji = {
  emoji: "🐰", 
  label: "rabbit", 
  counter: 0
}

Object containing infos about an emoji.


Emoji (Event)

addEventListener("emoji", e => console.log(e.emoji));

Event dispatched whenever an emoji gets clicked.


useEmojis

const [emojis, increment, decrement] = useEmojis(initialValue);

Reactions

import Reactions from 'lepre';

const reactionBlock = <Reactions emojis={EMOJI_OPTIONS} selected={SELECTED_EMOJIS} />

Default block, already configured and ready to be used anywhere.


Emoji

import {Emoji} from 'lepre';

const myEmoji= (
  <Emoji emoji={{emoji: "🐰", label: "rabbit"}} onClick={myCallback} />
);

Component used to render Emojis.


EmojiCounter

import {EmojiCounter} from 'lepre';

const counter = (
  <EmojiCounter emoji={{emoji: "🐰", label: "rabbit"}} onClick={myCallback} initialValue={5}/>
);

Component used to render Emojis with a counter near them.


EmojiPicker

import {EmojiPicker} from 'lepre';

const emojisToBeUsed = [
  {emoji: "🐰", label: "rabbit"},
  {emoji: "🐻", label: "bear"}
]

const emojisAlreadySelectedIGotFromTheDatabase = [
  {emoji: "🐰", label: "rabbit", counter: 10},
]

const picker = (
  <EmojiPicker  selectedEmojis={emojisAlreadySelectedIGotFromTheDatabase} 
                availableEmojis={emojisToBeUsed} 
                pickerIcon="<--"
                onClick={myCallback} />
);

Component used to render the Emoji Picker itself.

Demo

A basic demo with some example of Custom Blocks is available here.
I also use lepre on a personal project, check it out here: Real-Time React Commenting System.

Limitations

lepre aims to be fast and thin and because of that it has some limitations:

Contribute

Contributions are welcome! Please submit a pull request for new features or an issue if you find any bug or problem.
Please bear in mind that this library is meant to be lightweight first.

Contributors

To-Do

CSS

lepre comes with no CSS by default because rarely the stock design will remain unchanged. I thought that no CSS was better than unused CSS. Every component comes with classes already defined that you can use for styling.

Starter CSS

To help with the design, here's the CSS used in the Demo project for the Default Component. In the example/src folder of this repo you can find the styles for the other blocks.

.emoji {
  font-size: 25px;
  display: flex;
  align-items: center;
  cursor: pointer;
  vertical-align: middle;
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  transition-duration: 0.1s;
  transition-property: transform;
}

.reaction-div {
  display: inline-flex;
  flex-flow: wrap;
  margin: 10px 0px 10px 10px;
}

.emoji-container {
  position: relative;
  user-select: none;
  display: flex;
}

.emoji-counter {
  font-weight: bold;
  padding: 2px 5px;
  border-radius: 30%;
  background-color: #f55742;
  color: #fefefe;
}
.emoji:hover,
.emoji:focus,
.emoji:active {
  transform: scale(1.1);
}

.reaction-block {
  display: inline-flex;
  flex-flow: wrap;
}

.emoji-adder {
  user-select: none;
  position: relative;
  display: inline-block;
}

.emoji-menu-open {
  position: absolute;
  display: flex;
  top: 0px;
  left: 35px;
  border-radius: 10px;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  background-color: #fefefe;
  z-index: 10;
  width: auto;
}

.emoji-menu-open .emoji {
  margin: 5px;
}

.emoji-menu-closed {
  display: none;
}

Changelog

See CHANGELOG.md.

License

MIT © PandaSekh