react-twemojify
A React Component converts emoji (like 🙆) to img tag <img src="https://twemoji.maxcdn.com/v/latest/svg/1f646.svg" width=32 height=32 />
.
- Support web component img tag, like
amp-img
.
install
$ npm i react-twemojify
usage
using basic img tag
const { twemojify } = require('react-twemojify');
const { createImgElement } = require('react-twemojify/lib/img');
const result = twemojify('Hello World 🙆', createImgElement);
// Hello World <img src="https://twemoji.maxcdn.com/v/latest/svg/1f646.svg" alt="🙆" width=32 height=32 class="emoji">
console.log(result);
using amp-img tag
const { twemojify } = require('react-twemojify');
const { createImgElement } = require('react-twemojify/lib/amp-img');
const result = twemojify('Hello World 🙆', createImgElement);
// Hello World <amp-img src="https://twemoji.maxcdn.com/v/latest/svg/1f646.svg" alt="🙆" width=32 height=32 class="emoji">
console.log(result);
custom webcomponent tag
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 <x-some-special-webcomponent-img src="https://twemoji.maxcdn.com/v/latest/svg/1f646.svg" alt="🙆" width=32 height=32 class="emoji">
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.