1.0.3 • Published 7 years ago
emote-icons v1.0.3
emote-icons
scans and replace string that match an emoticon
Install
NPM
$ npm install emote-icons --saveUsage
Import
import emotes from 'emote-icons';
import 'emote-icons/src/emote-icons.css'; //load stylefor 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>;
}
}