# react-text-emoji

> Call emojis/emoticons (as image) with text in React

Latest version **1.1.0** (published 2018-11-14) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-text-emoji
pnpm add react-text-emoji
yarn add react-text-emoji
bun add react-text-emoji
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.0 |
| Published | 2018-11-14 |
| First published | 2018-11-14 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 10.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | kocisov |
| Maintainers | kocisov |

## Links

- npm: https://www.npmjs.com/package/react-text-emoji
- Repository: https://github.com/kocisov/react-text-emoji
- npm.io page: https://npm.io/package/react-text-emoji

## Recent versions

- 1.1.0 (latest) — 2018-11-14
- 1.0.0 — 2018-11-14

## README

# React Text Emoji

> Call emojis/emoticons (as image) with text in React

## Installation

```bash
# npm
$ npm install react-text-emoji

# yarn
$ yarn add react-text-emoji
```

## Usage

```js
import React from 'react'
import { render } from 'react-dom'
import { Message, createEmojisStore } from 'react-text-emoji'
// file loader
import lolEmoji from './lol.png'

createEmojisStore({
  ':smile:': '//smile-emoticon-url',
  'lol': lolEmoji,
  ...
})

render(
  <Message>Hello :smile:</Message>,
  document.getElementById('root')
)
```

## Customize

> Rendering components are customizable

```js
;<Message
  containerComponent={Container}
  emojiComponent={Emoji}
  textComponent={Text}
/>

const Container = ({ children, ...props }) => (
  <div
    style={{
      display: 'flex',
      alignItems: 'center',
    }}
    {...props}
  >
    {children}
  </div>
)

const Text = ({ value, ...props }) => (
  <span
    style={{
      marginRight: 5,
    }}
    {...props}
  >
    {value}
  </span>
)

const Emoji = ({ value, ...props }) => (
  <img
    style={{
      width: 30,
      height: 30,
      marginRight: 5,
    }}
    src={value}
    alt=""
    {...props}
  />
)
```

---
_Source: https://npm.io/package/react-text-emoji · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._