Miss any of our Open RFC calls?Watch the recordings here! »

react-twemojify

1.0.3 • Public • Published

react-twemojify

CI

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.

Install

npm i react-twemojify

DownloadsWeekly Downloads

148

Version

1.0.3

License

MIT

Unpacked Size

29.8 kB

Total Files

21

Last publish

Collaborators

  • avatar