unofficial; bodged by drinking-code
Openmoji is a collection of open source emojis. This repository lets you use these emojis in a React app easily.
Please comply with the Openmoji Attribution Requirements
npm i react-openmoji
For easy and dynamic use you can replace emojis completely automatically:
import React from 'react';
import reactReplaceEmojis from 'react-openmoji';
const App = () => {
return reactReplaceEmojis(<p>Hello 🙋♂️ World! 🌍</p>)
};
export default App;
You can also set options:
Field | Type | Description | Default |
---|---|---|---|
size |
CSS length (string) | size of the emojis | 1.5em |
outline |
boolean | set to true if you want the colourless emojis |
false |
import React from 'react';
import reactReplaceEmojis from 'react-openmoji';
const App = () => {
return reactReplaceEmojis(
<p>Hello 🙋♂️ World! 🌍</p>,
{size: '1.2em', outline: true}
)
};
export default App;
Is the string equivalent to reactReplaceEmojis
. Use this if you just want to replace emojis within a string.
import React from 'react';
import {replaceEmojis} from 'react-openmoji';
const App = () => {
return <p>{replaceEmojis('Hello 🙋♂️ World! 🌍')}</p>
};
export default App;
import React from 'react';
import {ManRaisingHand} from 'react-openmoji';
const App = () => {
return <p>Hello World! <ManRaisingHand/></p>
};
export default App;
Icon names from the Openmoji Library are converted into PascalCase,
so man raising hand
translates to ManRaisingHand
.
:
is replaced with _
.
waving hand: light skin tone -> WavingHand_LightSkinTone
,
, .
, ’
, !
, ”
, and &
are removed.
person: light skin tone, blond hair -> Person_LightSkinToneBlondHair
Mrs. Claus -> MrsClaus
twelve o’clock -> TwelveOclock
ON! arrow -> ONArrow
Japanese “here” button -> JapaneseHereButton
flag: Bosnia & Herzegovina -> Flag_BosniaHerzegovina
#
is replaced with NumberSign
, *
is replaced with Asterisk
.
keycap: # -> Keycap_NumberSign
keycap: * -> Keycap_Asterisk
Everything in brackets is removed.
A button (blood type) -> AButton
If a name starts with a number, a _
is added in front of the name.
1st place medal -> _1stPlaceMedal
Note: Some names may appear more than once in the Library (i.e. some emoji variations). Those duplicates are renamed to
DuplicatedName2
,DuplicatedName3
etc.
You can use the unicode of the emoji to import it. Unicodes are also listed in
the Openmoji Library. All unicode names have the U_
prefix in react-openmoji
.
import React from 'react';
import {U_1F64B_200D_2642_FE0F} from 'react-openmoji';
const App = () => {
return <p>Hello World! <U_1F64B_200D_2642_FE0F/></p>
};
export default App;
Fun fact: Importing all 3678 emojis at once is actually just as fast as the other methods because all emojis are dynamically loaded:
import React from 'react';
import * as Emoji from 'react-openmoji';
const App = () => {
return <p>Hello <Emoji.ManRaisingHand/> World! <Emoji._1F30D/></p>
};
export default App;
With all manual methods you can use two attributes:
Field | Type | Description | Default |
---|---|---|---|
size |
CSS length (string) | size of the emojis | 1.5em |
outline |
boolean attribute | add if you want the colourless emojis | false |
import React from 'react';
import {ManRaisingHand} from 'react-openmoji';
const App = () => {
return <p>Hello World! <ManRaisingHand size={'1.2em'} outline/></p>
};
export default App;