unified

Project: madiodio/remark-twemoji

Package: remark-twemoji@0.1.1

  1. Dependencies: 1ยทDependents: 1
  2. Remark plugin to use Twemoji
  1. remark 193
  2. javascript 17
  3. js 5
  4. emoji 4

remark-twemoji

prettier npm travis

Remark plugin to replace your emoji by using twemoji.

Install

Note: Although it is marked as a peerDependency, twemoji is required to work with this module.

npm install --dev remark-twemoji twemoji 

Usage

remark().use(remarkTwemoji, { options });
  1. Basic usage
const remark = require("remark");
const twemoji = require("remark-twemoji");

const doc = "๐Ÿ˜‚";
remark()
  .use(twemoji)
  .process(doc, function(err, file) {
    console.log(String(file));
  });
// => <img class="emoji" draggable="false" alt="๐Ÿ˜‚" src="https://twemoji.maxcdn.com/2/128x128/1f602.png" title="๐Ÿ˜‚"/>
  1. Usage with mdx (basically what this plugin has been for):

Somewhere in your webpack config file:

const webpack = require("webpack");
const twemoji = require("remark-twemoji");

...{
  test: /\.md$/,
  exclude: /node_modules/,
  use: [
    "babel-loader",
    {
      loader: "@mdx-js/loader",
      options: {
        mdPlugins: [twemoji],
        isReact: true
      }
    }
  ]
},...

For more informations, check this section on the mdx docs.

Options

options.isReact (boolean)

When using this plugin in a React setup, Twemoji will parse a dom node containing the attribute class instead of className which causes a warning at runtime. So if you're using React in your setup, use this to instruct the plugin to replace class by className in the final node, eg: ...[twemoji, { isReact: true }]...

Other options

Object

  {
    callback: Function,   // default the common replacer
    attributes: Function, // default returns {}
    base: string,         // default MaxCDN
    ext: string,          // default ".png"
    className: string,    // default "emoji"
    size: string|number,  // default "36x36"
    folder: string        // in case it's specified
                          // it replaces .size info, if any
  }

These are the options you can pass to this plugin as the twemoji options, you can read more about them here.

Inspirations

License

MIT