https://github.com/yosuke-furukawa/react-twemojify

React Component using twemoji parser, support webcomponents ( amp-img etc).
https://github.com/yosuke-furukawa/react-twemojify

Last synced: 17 days ago
JSON representation

React Component using twemoji parser, support webcomponents ( amp-img etc).

• Host: GitHub
• URL: https://github.com/yosuke-furukawa/react-twemojify
• Owner: yosuke-furukawa
• License: mit
• Created: 2020-04-10T02:33:15.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2024-04-13T11:23:58.000Z (7 months ago)
• Last Synced: 2024-04-15T12:17:35.452Z (7 months ago)
• Language: TypeScript
• Homepage:
• Size: 927 KB
• Stars: 3
• Watchers: 4
• Forks: 1
• Open Issues: 12
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# react-twemojify

![CI](https://github.com/yosuke-furukawa/react-twemojify/workflows/CI/badge.svg)

A React Component converts emoji (like 🙆) to img tag `` .

- Support web component img tag, like `amp-img`.

# install

```

$ npm i react-twemojify

```

# usage

## using basic img tag

```js

const { twemojify } = require('react-twemojify');

const { createImgElement }  = require('react-twemojify/lib/img');

const result = twemojify('Hello World 🙆', createImgElement);

// Hello World 

console.log(result);

```

## using amp-img tag

```js

const { twemojify } = require('react-twemojify');

const { createImgElement }  = require('react-twemojify/lib/amp-img');

const result = twemojify('Hello World 🙆', createImgElement);

// Hello World 

console.log(result);

```

## custom webcomponent tag

```js

const { twemojify } = require('react-twemojify');

const createImgElement = ({

  url,

  size,

  className,

  alt,

  key,

}) => {

  return React.createElement("x-some-special-webcomponent-img", {

    key,

    width: size,

    height: size,

    class: className,

    src: url,

    alt,

  });

};

const result = twemojify('Hello World 🙆', createImgElement);

// Hello World 

console.log(result);

```

# options

- size: number, default 32, width and height are changed if `size` is specified.

- class: classname, default emoji, class name is changed if `class` is specified.

- style: react style properties, default is null.