❤
npm
Sign UpSign In

emote-icons

1.0.3 • Public • Published

emote-icons

scans and replace string that match an emoticon

Build Status Coverage Status Code Climate

Demo Page

Install

NPM

$ npm install emote-icons --save

Usage

Import

import emotes from 'emote-icons';
import 'emote-icons/src/emote-icons.css'; //load style

for smaller emoticons import "emote-icons-sm.css" instead.

HTML

<html>
    <head>
        <meta charset="utf-8">
        <title>Emoticons Test</title>
    </head>
    <body>
        <div id="myContainer">
            Hello :)
        </div>
 
        <script>
            var content = $('#myContainer').html();
            $('#myContainer').html(emotes(content));
        </script> 
    </body>
</html>

React

import React from 'react';
import emotes from 'emote-icons';
import 'emote-icons/src/emote-icons.css';
 
class Emoticon extends React.Component {
    function generateEmoticon(htmlString) {
        return {__html: emotes(htmlString)};
    }
 
    function myEmoticon() {
        return <div dangerouslySetInnerHTML={generateEmoticon(htmlString)} />;
    }
 
    render() {
        const html = emotes('html string goes here');
        return <div>{ myEmoticon(htmlString) }</div>;
    }
}

you can also user "react-html-parser" if you don't want to use "dangerouslySetInnerHTML".

import React from 'react';
import ReactHtmlParser from 'react-html-parser';
import emotes from 'emote-icons';
import 'emote-icons/src/emote-icons.css';
 
class Emoticon extends React.Component {
  render() {
    const html = emotes('html string goes here');
    return <div>{ ReactHtmlParser(html) }</div>;
  }
}

Readme

Keywords

Package Sidebar

Install

npm i emote-icons

Repository

github.com/maddumajohnerick/emote-icons

Homepage

github.com/maddumajohnerick/emote-icons#readme

Weekly Downloads

1

Version

1.0.3

License

ISC

Last publish

Collaborators

  • maddumajohnerick
Try on RunKit
Report malware