Skip to content

Commit

Permalink
Add Custom Emoji Support (#358)
Browse files Browse the repository at this point in the history
* ?

* postcss config

* Order custom

* ClickableEmojiButton

* custom categories icon

* x

* Extract Most

* Hide Custom Category

* custom emojis prop

* custom emojis visible

* x

* Custom Emojis Ready

* docs
  • Loading branch information
ealush committed Sep 5, 2023
1 parent 5cc46f4 commit 3e9a1a4
Show file tree
Hide file tree
Showing 34 changed files with 463 additions and 209 deletions.
15 changes: 13 additions & 2 deletions .storybook/main.js
Original file line number Diff line number Diff line change
@@ -1,8 +1,19 @@
module.exports = {
stories: ['../stories/**/*.stories.@(ts|tsx|js|jsx)'],
addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
addons: [
'@storybook/addon-links',
'@storybook/addon-essentials',
{
name: '@storybook/addon-postcss',
options: {
postcssLoaderOptions: {
implementation: require('postcss')
}
}
}
],
// https://storybook.js.org/docs/react/configure/typescript#mainjs-configuration
typescript: {
check: true, // type-check stories during Storybook build
check: true // type-check stories during Storybook build
}
};
91 changes: 65 additions & 26 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,6 @@

![Picker](https://user-images.githubusercontent.com/11255103/192167134-8205eb89-a71d-4463-8f3a-940e844917d5.gif)

An emoji picker component for React applications.

## What to know before using

- This package assumes it runs in the browser. I have taken many steps to prevent it from failing on the server, but still, it is recommended to only render the component on the client. See troubleshooting section for more information.
Expand All @@ -30,16 +28,15 @@ function App() {

## Shout Outs!


| Component Design 🎨 |
|:-:|
| <a href="https://pavelbolo.com" target="_blank">![317751726_1277528579755086_5320360926126813336_n copy](https://user-images.githubusercontent.com/11255103/205937426-a570b4a1-7243-4d3e-a7e5-ea04b61d940a.png)</a> |
| <a href="https://pavelbolo.com" target="_blank">Pavel Bolo</a> |

| Component Design 🎨 |
| :-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: |
| <a href="https://pavelbolo.com" target="_blank">![317751726_1277528579755086_5320360926126813336_n copy](https://user-images.githubusercontent.com/11255103/205937426-a570b4a1-7243-4d3e-a7e5-ea04b61d940a.png)</a> |
| <a href="https://pavelbolo.com" target="_blank">Pavel Bolo</a> |

## Features

- Custom click handler
- Custom Emojis Support
- Dark mode
- Customizable styles via css variables
- Default skin tone selection
Expand All @@ -52,24 +49,26 @@ function App() {

The following props are accepted by them picker:

| Prop | Type | Default | Description |
| ---------------------- | ----------------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
| onEmojiClick | function | | Callback function that is called when an emoji is clicked. The function receives the emoji object as a parameter. |
| autoFocusSearch | boolean | `true` | Controls the auto focus of the search input. |
| Theme | string | `light` | Controls the theme of the picker. Possible values are `light`, `dark` and `auto`. |
| emojiStyle | string | `apple` | Controls the emoji style. Possible values are `google`, `apple`, `facebook`, `twitter` and `native`. |
| defaultSkinTone | string | `neutral` | Controls the default skin tone. |
| lazyLoadEmojis | boolean | `false` | Controls whether the emojis are loaded lazily or not. |
| previewConfig | object | `{}` | Controls the preview of the emoji. See below for more information. |
| searchPlaceholder | string | `Search` | Controls the placeholder of the search input. |
| suggestedEmojisMode | string | `frequent` | Controls the suggested emojis mode. Possible values are `frequent` and `recent`. |
| skinTonesDisabled | boolean | `false` | Controls whether the skin tones are disabled or not. |
| searchDisabled | boolean | `false` | Controls whether the search is disabled or not. When disabled, the skin tone picker will be shown in the preview component. |
| skinTonePickerLocation | string | `SEARCH` | Controls the location of the skin tone picker. Possible values are `SEARCH` and `PREVIEW`. |
| `width` | `number`/`string` | `350` | Controls the width of the picker. You can provide a number that will be treated as pixel size, or your any accepted css width as string. |
| emojiVersion | `string` | - | Allows displaying emojis up to a certain version for compatibility. |
| `height` | `number`/`string` | `450` | Controls the height of the picker. You can provide a number that will be treated as pixel size, or your any accepted css height as string. |
| getEmojiUrl | `Function` | - | Allows to customize the emoji url and provide your own image host. |
| Prop | Type | Default | Description |
| ---------------------- | ------------------------------------------------------ | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
| onEmojiClick | function | | Callback function that is called when an emoji is clicked. The function receives the emoji object as a parameter. |
| autoFocusSearch | boolean | `true` | Controls the auto focus of the search input. |
| Theme | string | `light` | Controls the theme of the picker. Possible values are `light`, `dark` and `auto`. |
| emojiStyle | string | `apple` | Controls the emoji style. Possible values are `google`, `apple`, `facebook`, `twitter` and `native`. |
| defaultSkinTone | string | `neutral` | Controls the default skin tone. |
| lazyLoadEmojis | boolean | `false` | Controls whether the emojis are loaded lazily or not. |
| previewConfig | object | `{}` | Controls the preview of the emoji. See below for more information. |
| searchPlaceholder | string | `Search` | Controls the placeholder of the search input. |
| suggestedEmojisMode | string | `frequent` | Controls the suggested emojis mode. Possible values are `frequent` and `recent`. |
| skinTonesDisabled | boolean | `false` | Controls whether the skin tones are disabled or not. |
| searchDisabled | boolean | `false` | Controls whether the search is disabled or not. When disabled, the skin tone picker will be shown in the preview component. |
| skinTonePickerLocation | string | `SEARCH` | Controls the location of the skin tone picker. Possible values are `SEARCH` and `PREVIEW`. |
| `width` | `number`/`string` | `350` | Controls the width of the picker. You can provide a number that will be treated as pixel size, or your any accepted css width as string. |
| emojiVersion | `string` | - | Allows displaying emojis up to a certain version for compatibility. |
| `height` | `number`/`string` | `450` | Controls the height of the picker. You can provide a number that will be treated as pixel size, or your any accepted css height as string. |
| getEmojiUrl | `Function` | - | Allows to customize the emoji url and provide your own image host. |
| categories | `Array` | - | Allows full config over ordering, naming and display of categories. |
| customEmojis | `Array<{names: string[], imgUrl: string, id: string}>` | - | Allows adding custom emojis to the picker. |

## Full details

Expand Down Expand Up @@ -145,6 +144,7 @@ import { SkinTones } from 'emoji-picker-react';
To only sort/omit categories, you can simply pass an array of category names to display:

- 'suggested',
- 'custom', - Hidden by default
- 'smileys_people',
- 'animals_nature',
- 'food_drink',
Expand Down Expand Up @@ -186,6 +186,45 @@ import { SkinTones } from 'emoji-picker-react';

* `getEmojiUrl`: `(unified: string, emojiStyle: EmojiStyle) => string` - Allows to customize the emoji url and provide your own image host. The function receives the emoji unified and the emoji style as parameters. The function should return the url of the emoji image.

## Custom Emojis

The customEmojis prop allows you to add custom emojis to the picker. The custom emojis prop takes an array of custom emojis, each custom emoji has three keys:

id: Unique identifier for each of the custom emojis
names: an array of string identifiers, will be used both for display, search and indexing.
imgUrl: URL for the emoji image

### Usage Example:

```jsx
<Picker
customEmojis={[
{
names: ['Film'],
imgUrl: 'https://cdn.jsdelivr.net/npm/eva-icons/fill/svg/film.svg',
id: 'film'
},
{
names: ['Bar Chart'],
imgUrl: 'https://cdn.jsdelivr.net/npm/eva-icons/fill/svg/bar-chart.svg',
id: 'bar_chart'
},
{
names: ['champagne', 'bottle', 'sparkling wine'],
imgUrl:
'https://cdn.jsdelivr.net/gh/hfg-gmuend/openmoji/src/food-drink/drink/1F37E.svg',
id: 'champagne'
}
]}
/>
```

Here are some additional things to keep in mind about custom emojis:

- The custom emojis will be added to the Custom category.
- The location or name of the Custom category can be controlled via the categories prop.
- The custom emojis will be indexed by their id property. This means that you can search for custom emojis by their id or names.

# Customization

## Custom Picker Width and Height
Expand Down
10 changes: 5 additions & 5 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{
"version": "4.4.12",
"version": "4.5.0",
"license": "MIT",
"main": "dist/index.js",
"typings": "dist/index.d.ts",
Expand Down Expand Up @@ -77,6 +77,9 @@
"emoji-datasource": "^14.0.0",
"eslint-import-resolver-typescript": "^3.3.0",
"eslint-plugin-import": "^2.26.0",
"eslint-plugin-jsx-a11y": "^6.6.1",
"eslint-plugin-react": "^7.31.8",
"eslint-plugin-react-hooks": "^4.6.0",
"fs-extra": "^10.1.0",
"glob": "^8.0.3",
"husky": "^8.0.1",
Expand All @@ -92,10 +95,7 @@
"tiny-invariant": "^1.2.0",
"tsdx": "^0.14.1",
"tslib": "^2.4.0",
"typescript": "^4.7.4",
"eslint-plugin-jsx-a11y": "^6.6.1",
"eslint-plugin-react": "^7.31.8",
"eslint-plugin-react-hooks": "^4.6.0"
"typescript": "^4.7.4"
},
"dependencies": {
"clsx": "^1.2.1"
Expand Down
9 changes: 9 additions & 0 deletions postcss.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
module.exports = {
plugins: [
require('postcss-inline-svg'),
require('postcss-svgo'),
require('autoprefixer'),
require('cssnano')
],
inject: true
};
6 changes: 4 additions & 2 deletions scripts/prepare.js
Original file line number Diff line number Diff line change
Expand Up @@ -16,12 +16,14 @@ const keys = {
GROUP_NAME_OBJECTS: 'objects',
GROUP_NAME_SYMBOLS: 'symbols',
GROUP_NAME_FLAGS: 'flags',
GROUP_NAME_SUGGESTED: 'suggested'
GROUP_NAME_SUGGESTED: 'suggested',
GROUP_NAME_CUSTOM: 'custom'
};

const groupConversion = {
[keys.GROUP_NAME_PEOPLE]: keys.GROUP_NAME_PEOPLE,
smileys_emotion: keys.GROUP_NAME_PEOPLE,
custom: keys.GROUP_NAME_CUSTOM,
people_body: keys.GROUP_NAME_PEOPLE,
animals_nature: keys.GROUP_NAME_NATURE,
food_drink: keys.GROUP_NAME_FOOD,
Expand Down Expand Up @@ -82,7 +84,7 @@ const { groupedEmojis } = emojis.reduce(
groupedEmojis[category].push(cleanEmoji(emoji));
return { groupedEmojis };
},
{ groupedEmojis: {} }
{ groupedEmojis: { [keys.GROUP_NAME_CUSTOM]: [] } }
);

writeJSONSync('./src/data/emojis.json', groupedEmojis, 'utf8');
Expand Down
3 changes: 2 additions & 1 deletion src/components/context/PickerConfigContext.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,9 @@ const ConfigContext = React.createContext<PickerConfigInternal>(
);

export function PickerConfigProvider({ children, ...config }: Props) {
const [mergedConfig] = React.useState(() => mergeConfig(config));
return (
<ConfigContext.Provider value={mergeConfig(config)}>
<ConfigContext.Provider value={mergedConfig}>
{children}
</ConfigContext.Provider>
);
Expand Down
13 changes: 13 additions & 0 deletions src/components/emoji/BaseEmojiProps.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import { CustomEmoji } from '../../config/customEmojiConfig';
import { DataEmoji } from '../../dataUtils/DataTypes';
import { EmojiStyle } from '../../types/exposedTypes';

export type BaseEmojiProps = {
emoji?: DataEmoji | CustomEmoji;
emojiStyle: EmojiStyle;
unified: string;
size?: number;
lazyLoad?: boolean;
getEmojiUrl?: GetEmojiUrl;
};
export type GetEmojiUrl = (unified: string, style: EmojiStyle) => string;
42 changes: 42 additions & 0 deletions src/components/emoji/ClickableEmojiButton.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
import clsx from 'clsx';
import * as React from 'react';

import { ClassNames } from '../../DomUtils/classNames';
import { Button } from '../atoms/Button';
import './Emoji.css';

type ClickableEmojiButtonProps = Readonly<{
hidden?: boolean;
showVariations?: boolean;
hiddenOnSearch?: boolean;
emojiNames: string[];
children: React.ReactNode;
hasVariations: boolean;
unified?: string;
}>;

export function ClickableEmojiButton({
emojiNames,
unified,
hidden,
hiddenOnSearch,
showVariations = true,
hasVariations,
children
}: ClickableEmojiButtonProps) {
return (
<Button
className={clsx(ClassNames.emoji, {
[ClassNames.hidden]: hidden,
[ClassNames.hiddenOnSearch]: hiddenOnSearch,
[ClassNames.visible]: !hidden && !hiddenOnSearch,
[ClassNames.emojiHasVariations]: hasVariations && showVariations
})}
data-unified={unified}
aria-label={emojiNames[0]}
data-full-name={emojiNames}
>
{children}
</Button>
);
}
2 changes: 2 additions & 0 deletions src/components/emoji/Emoji.css
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,8 @@
.EmojiPickerReact button.epr-emoji .epr-emoji-img {
max-width: var(--epr-emoji-fullsize);
max-height: var(--epr-emoji-fullsize);
min-width: var(--epr-emoji-fullsize);
min-height: var(--epr-emoji-fullsize);
padding: var(--epr-emoji-padding);
}

Expand Down
Loading

0 comments on commit 3e9a1a4

Please sign in to comment.