#### Props
- children anything React can render
- Children can be any object that React renders. Numbers, strings, other
React elements, etc. The only children that are transformed by this component
are string emojis.
- render function
- default Emoji
- This prop provides a functional component which is rendered each time an emoji
is encountered in your child string. See Emoji for prop types.
- size number
- default 16
- This is the width and height you want your emoji to render to. With the free
license for EmojiOne, the max size you can render is 128px without blur.
- hiDpi bool
- default false
- By setting hiDpi to true, you will create more crisp emojis for high DPI
devices with the tradeoff that the image transfer size will be larger.
- publicPath string
- default
- Images: https://cdn.jsdelivr.net/emojione/assets/4.0/png/
- Sprites: https://github.com/jaredLunde/react-emoji-component/blob/master/assets/sprites/
- This is the public path to your EmojiOne sprites and image files. It allows
you to self-host those files instead of using the defaults.
- extension string
- default png
- This is the file extension used for your EmojiOne sprites and image files.
Its inclusion allows you to self-host those files and transform them to
something like JPEG-XR or WebP instead of PNG.

$3

by default as its render
prop.

#### Props
- emoji string
- This is the untransformed string emoji that was found in your child text.
- codePoint string
- This is the code point for the emoji assigned to the emoji data mapping,
and PNGs
- options object
- size number
- See Emojis
- hiDpi bool
- See Emojis
- publicPath string
- See Emojis
- extension string
- See Emojis

$3


This emoji renderer will use a and background-image along with a
CSS sprite instead of an element. Its options are the same as
Emoji.

`js
import {Emojis, EmojiSprite} from 'react-emoji-component'


Seriously! You 👏🏻 should 👏🏻 be 👏🏻 using 👏🏻 react-emoji-component

`

See createEmojisComponent below
for an example of how to create your own component with the EmojiSprite
as the default renderer.

$3


You can use this to create your own default component. See
Emojis for options.
`js
import {createEmojisComponent, EmojiSprite} from 'react-emoji-component'

const MyEmojis = createEmojisComponent({
size: 24,
publicPath: '/path/to/emoji/sprites',
render: EmojiSprite
})
`

$3


Returns an Array of React elements with string emojis replaced by Emoji React
components
`js
import {toEmojis} from 'react-emoji-component'
toEmojis('You 👏🏻 should 👏🏻 be 👏🏻 using 👏🏻 react-emoji-component', {size: 24})
// ['You', , 'should', , 'be', , 'using', , 'react-emoji-component']
`

$3

Returns an img src string for the file associated with the codePoint/emoji

$3

Returns a style object for the sprite associated with the codePoint/emoji

$3

Creates a - delimited list of the codePoints found in the emoji without
empty joiners.
`js
emojiToCodePoints('👨🏾‍🚒')
// "1f468-1f3fe-1f692"
`

$3

Returns true if the current environment supports the image/webm format

$3

Splits a string by its graphemes and returns an Array of constituent characters.

------

$3

#### copy(destinationPath, options)
This is a utility for copying EmojiOne assets such as sprites and PNGs to
a local destination in your project. It is useful for self-hosting your
emoji set.
`js
import {copy} from 'react-emoji-component/assets'

copy('/path/to/your/public/files', {excludeSprites: true})
`


##### Options
- excludePNG bool
- default false
- Excludes the single-icon image assets from the copy call
- excludeSprites bool
- default false
- Excludes the sprite image and css assets from the copy call
- excludeJSON bool
- default false
- Excludes the emoji.json file from the copy call.

------

$3

This package comes with a binary for easily copying the EmojiOne assets to a
local destination.

See 2ality
for more information about local node bins.

`sh
node_modules/.bin/copy-emoji-assets public/images/emojione --excludeSprites
`

------

WebP example


This contrived example assumes you've already used react-emoji-component/assets
to copy files to your local destination and that you've already transcoded
the files to the image/webm format. I'm merely giving hints here about how to
use the createEmojisComponent() function to your ultimate advantage.

`js
import {createEmojisComponent, EmojiSprite, supportsWebP} from 'react-emoji-component'

// use the built-in supportsWebP() function to determine if the browser
// supports it
const useWebP = supportsWebP()

//
const Emojis = createEmojisComponent({
publicPath: useWebP ? '/path/to/webp' : '/path/to/png',
extension: useWebP ? '.webp' : '.png'
})


We 👏 have 👏 got 👏 WebP 👏 files


// sprites
const Emojis = createEmojisComponent({
publicPath: useWebP ? '/path/to/webp/sprites' : '/path/to/png/sprites',
extension: useWebP ? '.webp' : 'png',
render: EmojiSprite,
})


We 👏 have 👏 got 👏 WebP 👏 files

``

Attributions

- Emoji icons provided free by EmojiOne
- Graphemes split by orling/grapheme-splitter