interweave-emoji - npm Package Compare versions

lib/Emoji.d.ts

lib/EmojiDataManager.d.ts

lib/EmojiDataManager.js

lib/EmojiMatcher.d.ts

lib/index.d.ts

lib/shapes.d.ts

lib/types.d.ts

lib/types.js

lib/withEmojiData.d.ts

tsconfig.json

121

CHANGELOG.md

		@@ -0,75 +1,116 @@
		# 2.0.0

		#### 💥 Breaking

		- Updated minimum `react` requirement to 16.3.
		- Updated minimum `emojibase` requirement to 1.7.
		- Renamed `EmojiData` to `EmojiDataManager`.
		- Removed "Emoji" prefix from `EmojiPathShape`, `EmojiSizeShape`, and `EmojiSourceShape`.
		- Removed class names from generated elements.
		- The `withEmojiData` HOC will return `null` until emoji data has loaded.

		#### 🚀 New

		- Updated `withEmojiData` to pass the current `EmojiDataManager` instance as an `emojiData` prop.

		#### 🛠 Internal

		- Converted from Flow to TypeScript.

		# 1.4.0 - 04/16/18

		#### 🐞 Fixed
		* Updated `componentWillMount` to `componentDidMount` and `componentWillReceiveProps` to `componentDidUpdate` in preparation for React 16.3.

		- Updated `componentWillMount` to `componentDidMount` and `componentWillReceiveProps` to
		`componentDidUpdate` in preparation for React 16.3.

		# 1.3.1 - 11/10/17

		#### 🚀 New
		* Updated `emojibase-regex` to 1.0.9.

		- Updated `emojibase-regex` to 1.0.9.

		#### 🛠 Internal
		* Tested against React 16.1.
		* Improved build process.

		- Tested against React 16.1.
		- Improved build process.

		# 1.3.0 - 10/23/17

		#### 🚀 New
		* Updated `withEmojiData` to refresh data if props change.

		- Updated `withEmojiData` to refresh data if props change.

		#### 🐞 Fixed
		* Passing custom `emoijs` to `withEmojiData` will no longer mutate official data in `EmojiData`.

		- Passing custom `emoijs` to `withEmojiData` will no longer mutate official data in `EmojiData`.

		# 1.2.0 - 10/12/17

		#### 🚀 New
		* Updated `interweave` peer dependency to 8.0.
		* Added a `renderUnicode` prop to the `Emoji` component.

		- Updated `interweave` peer dependency to 8.0.
		- Added a `renderUnicode` prop to the `Emoji` component.

		#### 🐞 Fixed
		* Emojis with multiple presentation variants will no longer break the matching process.

		- Emojis with multiple presentation variants will no longer break the matching process.

		#### 🛠 Internal
		* Updated `EmojiData` to map data using hexcodes instead of unicode characters.

		- Updated `EmojiData` to map data using hexcodes instead of unicode characters.

		# 1.1.0 - 9/26/17

		#### 🚀 New
		* Updated `prop-types` to 15.6.

		- Updated `prop-types` to 15.6.

		#### 🛠 Internal
		* Tested against React 16.

		- Tested against React 16.

		# 1.0.0 - 9/25/17

		#### 🎉 Release
		* Initial release!

		- Initial release!

		#### 💥 Breaking
		* Migrated `Emoji` component to `React.PureComponent`.
		* Refactored `EmojiLoader` into an HOC named `withEmojiData`, as the original approach
		would not re-render components correctly in some situations.
		* Updated `emojiSize` and `emojiLargeSize` props to accept a string or number,
		and to default to `1em` and `3em` respectively.
		* If using a number, it will pass through to React (which uses `px`).
		* If using a string, it will be used as-is (`1em`).
		* Updated `emojiLargeSize` to no longer auto-multiply size. The prop must be defined manually.

		- Migrated `Emoji` component to `React.PureComponent`.
		- Refactored `EmojiLoader` into an HOC named `withEmojiData`, as the original approach would not
		re-render components correctly in some situations.
		- Updated `emojiSize` and `emojiLargeSize` props to accept a string or number, and to default to
		`1em` and `3em` respectively.
		- If using a number, it will pass through to React (which uses `px`).
		- If using a string, it will be used as-is (`1em`).
		- Updated `emojiLargeSize` to no longer auto-multiply size. The prop must be defined manually.

		#### 🚀 New
		* Added `Emoji`, `EmojiPath`, `EmojiSize`, and `EmojiSource` types to the Flowtype definitions.
		* Added `EmojiShape`, `EmojiPathShape`, `EmojiSizeShape`, and `EmojiSourceShape` prop types.
		* Updated `emojiSize` prop to also set `height` on the `img` tag.
		* Updated `withEmojiData` to support new props.
		* `compact` - Will load `compact.json` instead of `data.json` from the CDN.
		* `emojis` - Can be used to manually load emoji data without fetching from the CDN.
		* Updated `withEmojiData` to pass new props to the wrapped component.
		* `emojis` - An array of loaded emoji data.
		* `emojiSource` - An object that contains `version`, `locale`, and `compact`.
		* Updated parsed and packaged emoji data to include additional properties.
		* Added `unicode`, which is either the emoji or text presentation Unicode character.
		* Added `canonical_shortcodes`, which are an array of shortcodes including surrounding colons.
		* Added `primary_shortcode`, which is the primary and most common shortcode, with colons.

		- Added `Emoji`, `EmojiPath`, `EmojiSize`, and `EmojiSource` types to the Flowtype definitions.
		- Added `EmojiShape`, `EmojiPathShape`, `EmojiSizeShape`, and `EmojiSourceShape` prop types.
		- Updated `emojiSize` prop to also set `height` on the `img` tag.
		- Updated `withEmojiData` to support new props.
		- `compact` - Will load `compact.json` instead of `data.json` from the CDN.
		- `emojis` - Can be used to manually load emoji data without fetching from the CDN.
		- Updated `withEmojiData` to pass new props to the wrapped component.
		- `emojis` - An array of loaded emoji data.
		- `emojiSource` - An object that contains `version`, `locale`, and `compact`.
		- Updated parsed and packaged emoji data to include additional properties.
		- Added `unicode`, which is either the emoji or text presentation Unicode character.
		- Added `canonical_shortcodes`, which are an array of shortcodes including surrounding colons.
		- Added `primary_shortcode`, which is the primary and most common shortcode, with colons.

		#### 🛠 Internal
		* Updated `emojibase` to 1.4.0.
		* Updated `emojibase-regex` to 1.0.6.

		- Updated `emojibase` to 1.4.0.
		- Updated `emojibase-regex` to 1.0.6.

		# Pre-1.0.0
		This package was originally part of `interweave` but over time, it grew too large and unwieldy.
		In an effort to reduce bloat and dependencies, the emoji functionality was broken off into
		this package. The 1.0.0 release mentioned above contains breaking changes against its previous
		core implementation.

		This package was originally part of `interweave` but over time, it grew too large and unwieldy. In
		an effort to reduce bloat and dependencies, the emoji functionality was broken off into this
		package. The 1.0.0 release mentioned above contains breaking changes against its previous core
		implementation.

266

lib/Emoji.js

		@@ -1,174 +0,96 @@
		'use strict';

		Object.defineProperty(exports, "__esModule", {
		value: true
		});

		var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');

		var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

		var _createClass2 = require('babel-runtime/helpers/createClass');

		var _createClass3 = _interopRequireDefault(_createClass2);

		var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');

		var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

		var _inherits2 = require('babel-runtime/helpers/inherits');

		var _inherits3 = _interopRequireDefault(_inherits2);

		var _react = require('react');

		var _react2 = _interopRequireDefault(_react);

		var _propTypes = require('prop-types');

		var _propTypes2 = _interopRequireDefault(_propTypes);

		var _EmojiData = require('./EmojiData');

		var _EmojiData2 = _interopRequireDefault(_EmojiData);

		var _shapes = require('./shapes');

		function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

		/**
		* @copyright 2016, Miles Johnson
		* @license https://opensource.org/licenses/MIT
		*
		*/

		var Emoji = function (_React$PureComponent) {
		(0, _inherits3.default)(Emoji, _React$PureComponent);

		function Emoji() {
		(0, _classCallCheck3.default)(this, Emoji);
		return (0, _possibleConstructorReturn3.default)(this, (Emoji.__proto__ \|\| Object.getPrototypeOf(Emoji)).apply(this, arguments));
		}

		(0, _createClass3.default)(Emoji, [{
		key: 'render',
		value: function render() {
		var data = _EmojiData2.default.getInstance(this.props.emojiSource.locale);
		var _props = this.props,
		emojiLargeSize = _props.emojiLargeSize,
		emojiPath = _props.emojiPath,
		emojiSize = _props.emojiSize,
		emoticon = _props.emoticon,
		enlargeEmoji = _props.enlargeEmoji,
		renderUnicode = _props.renderUnicode,
		shortcode = _props.shortcode,
		unicode = _props.unicode;
		var hexcode = this.props.hexcode;


		if ("production" !== process.env.NODE_ENV) {
		if (!emoticon && !shortcode && !unicode && !hexcode) {
		throw new Error('Emoji component requires a `unicode` character, `emoticon`, `hexcode`, or a `shortcode`.');
		"use strict";
		var __extends = (this && this.__extends) \|\| (function () {
		var extendStatics = Object.setPrototypeOf \|\|
		({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) \|\|
		function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
		return function (d, b) {
		extendStatics(d, b);
		function __() { this.constructor = d; }
		d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
		};
		})();
		var __importDefault = (this && this.__importDefault) \|\| function (mod) {
		return (mod && mod.__esModule) ? mod : { "default": mod };
		};
		Object.defineProperty(exports, "__esModule", { value: true });
		var react_1 = __importDefault(require("react"));
		var prop_types_1 = __importDefault(require("prop-types"));
		var EmojiDataManager_1 = __importDefault(require("./EmojiDataManager"));
		var shapes_1 = require("./shapes");
		var Emoji = (function (_super) {
		__extends(Emoji, _super);
		function Emoji() {
		return _super !== null && _super.apply(this, arguments) \|\| this;
		}
		Emoji.prototype.render = function () {
		var data = EmojiDataManager_1.default.getInstance(this.props.emojiSource.locale);
		var _a = this.props, emojiLargeSize = _a.emojiLargeSize, emojiPath = _a.emojiPath, emojiSize = _a.emojiSize, emoticon = _a.emoticon, enlargeEmoji = _a.enlargeEmoji, renderUnicode = _a.renderUnicode, shortcode = _a.shortcode, unicode = _a.unicode;
		var hexcode = this.props.hexcode;
		if (process.env.NODE_ENV !== 'production') {
		if (!emoticon && !shortcode && !unicode && !hexcode) {
		throw new Error('Emoji component requires a `unicode` character, `emoticon`, `hexcode`, or a `shortcode`.');
		}
		}
		}

		if (!hexcode && shortcode) {
		hexcode = data.SHORTCODE_TO_HEXCODE[shortcode];
		}

		if (!hexcode && emoticon) {
		hexcode = data.EMOTICON_TO_HEXCODE[emoticon];
		}

		if (!hexcode && unicode) {
		hexcode = data.UNICODE_TO_HEXCODE[unicode];
		}

		if (!hexcode \|\| !data.EMOJIS[hexcode]) {
		return _react2.default.createElement(
		'span',
		null,
		unicode \|\| emoticon \|\| shortcode \|\| hexcode
		);
		}

		var emoji = data.EMOJIS[hexcode];

		if (renderUnicode) {
		return _react2.default.createElement(
		'span',
		null,
		emoji.unicode
		);
		}

		var className = ['interweave__emoji'];
		var styles = {
		display: 'inline-block',
		verticalAlign: 'middle'
		};

		if (emojiSize) {
		styles.width = emojiSize;
		styles.height = emojiSize;
		}

		if (enlargeEmoji) {
		className.push('interweave__emoji--large');

		if (emojiLargeSize) {
		styles.width = emojiLargeSize;
		styles.height = emojiLargeSize;
		if (!hexcode && shortcode) {
		hexcode = data.SHORTCODE_TO_HEXCODE[shortcode];
		}
		}

		var path = emojiPath \|\| '{{hexcode}}';

		if (typeof path === 'function') {
		path = path(emoji.hexcode, enlargeEmoji, emojiSize, emojiLargeSize);
		} else {
		path = path.replace('{{hexcode}}', emoji.hexcode);
		}

		return _react2.default.createElement('img', {
		src: path,
		alt: emoji.unicode,
		title: emoji.annotation \|\| '',
		style: styles,
		className: className.join(' '),
		'aria-label': emoji.annotation \|\| '',
		'data-emoticon': emoji.emoticon \|\| '',
		'data-unicode': emoji.unicode,
		'data-hexcode': emoji.hexcode,

		'data-shortcodes': emoji.canonical_shortcodes.join(', ')
		});
		}
		}]);
		return Emoji;
		}(_react2.default.PureComponent);

		Emoji.propTypes = {
		emojiLargeSize: _shapes.EmojiSizeShape,
		emojiPath: _shapes.EmojiPathShape,
		emojiSize: _shapes.EmojiSizeShape,
		emojiSource: _shapes.EmojiSourceShape.isRequired,
		emoticon: _propTypes2.default.string,
		enlargeEmoji: _propTypes2.default.bool,
		hexcode: _propTypes2.default.string,
		renderUnicode: _propTypes2.default.bool,
		shortcode: _propTypes2.default.string,
		unicode: _propTypes2.default.string
		};
		Emoji.defaultProps = {
		emojiLargeSize: '3em',
		emojiPath: '{{hexcode}}',
		emojiSize: '1em',
		emoticon: '',
		enlargeEmoji: false,
		hexcode: '',
		renderUnicode: false,
		shortcode: '',
		unicode: ''
		};
		exports.default = Emoji;
		if (!hexcode && emoticon) {
		hexcode = data.EMOTICON_TO_HEXCODE[emoticon];
		}
		if (!hexcode && unicode) {
		hexcode = data.UNICODE_TO_HEXCODE[unicode];
		}
		if (!hexcode \|\| !data.EMOJIS[hexcode]) {
		return react_1.default.createElement("span", null, unicode \|\| emoticon \|\| shortcode \|\| hexcode);
		}
		var emoji = data.EMOJIS[hexcode];
		if (renderUnicode) {
		return react_1.default.createElement("span", null, emoji.unicode);
		}
		var styles = {
		display: 'inline-block',
		verticalAlign: 'middle',
		};
		if (enlargeEmoji && emojiLargeSize) {
		styles.width = emojiLargeSize;
		styles.height = emojiLargeSize;
		}
		else if (emojiSize) {
		styles.width = emojiSize;
		styles.height = emojiSize;
		}
		var path = emojiPath \|\| '{{hexcode}}';
		if (typeof path === 'function') {
		path = path(emoji.hexcode, enlargeEmoji, emojiSize, emojiLargeSize);
		}
		else {
		path = path.replace('{{hexcode}}', emoji.hexcode);
		}
		return (react_1.default.createElement("img", { src: path, alt: emoji.unicode, title: emoji.annotation \|\| '', style: styles, "aria-label": emoji.annotation \|\| '', "data-emoticon": emoji.emoticon \|\| '', "data-unicode": emoji.unicode, "data-hexcode": emoji.hexcode, "data-shortcodes": emoji.canonical_shortcodes.join(', ') }));
		};
		Emoji.propTypes = {
		emojiLargeSize: shapes_1.SizeShape,
		emojiPath: shapes_1.PathShape,
		emojiSize: shapes_1.SizeShape,
		emojiSource: shapes_1.SourceShape.isRequired,
		emoticon: prop_types_1.default.string,
		enlargeEmoji: prop_types_1.default.bool,
		hexcode: prop_types_1.default.string,
		renderUnicode: prop_types_1.default.bool,
		shortcode: prop_types_1.default.string,
		unicode: prop_types_1.default.string,
		};
		Emoji.defaultProps = {
		emojiLargeSize: '3em',
		emojiPath: '{{hexcode}}',
		emojiSize: '1em',
		emoticon: '',
		enlargeEmoji: false,
		hexcode: '',
		renderUnicode: false,
		shortcode: '',
		unicode: '',
		};
		return Emoji;
		}(react_1.default.PureComponent));
		exports.default = Emoji;

387

lib/EmojiMatcher.js

		@@ -1,237 +0,164 @@
		'use strict';

		Object.defineProperty(exports, "__esModule", {
		value: true
		});

		var _extends2 = require('babel-runtime/helpers/extends');

		var _extends3 = _interopRequireDefault(_extends2);

		var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');

		var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

		var _createClass2 = require('babel-runtime/helpers/createClass');

		var _createClass3 = _interopRequireDefault(_createClass2);

		var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');

		var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

		var _inherits2 = require('babel-runtime/helpers/inherits');

		var _inherits3 = _interopRequireDefault(_inherits2);

		var _react = require('react');

		var _react2 = _interopRequireDefault(_react);

		var _interweave = require('interweave');

		var _emojibaseRegex = require('emojibase-regex');

		var _emojibaseRegex2 = _interopRequireDefault(_emojibaseRegex);

		var _emoticon = require('emojibase-regex/emoticon');

		var _emoticon2 = _interopRequireDefault(_emoticon);

		var _shortcode = require('emojibase-regex/shortcode');

		var _shortcode2 = _interopRequireDefault(_shortcode);

		var _Emoji = require('./Emoji');

		var _Emoji2 = _interopRequireDefault(_Emoji);

		var _EmojiData = require('./EmojiData');

		var _EmojiData2 = _interopRequireDefault(_EmojiData);

		function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

		var EMOTICON_BOUNDARY_REGEX = new RegExp('(^\|\\\b\|\\s)(' + _emoticon2.default.source + ')(?=\\s\|\\\b\|$)'); /**
		* @copyright 2016, Miles Johnson
		* @license https://opensource.org/licenses/MIT
		*
		*/

		var EmojiMatcher = function (_Matcher) {
		(0, _inherits3.default)(EmojiMatcher, _Matcher);

		function EmojiMatcher(name) {
		var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
		var factory = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
		(0, _classCallCheck3.default)(this, EmojiMatcher);
		return (0, _possibleConstructorReturn3.default)(this, (EmojiMatcher.__proto__ \|\| Object.getPrototypeOf(EmojiMatcher)).call(this, name, (0, _extends3.default)({
		convertEmoticon: false,
		convertShortcode: false,
		convertUnicode: false,
		enlargeThreshold: 1,
		renderUnicode: false
		}, options), factory));
		}

		(0, _createClass3.default)(EmojiMatcher, [{
		key: 'replaceWith',
		value: function replaceWith(match) {
		var props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};

		return _react2.default.createElement(_Emoji2.default, (0, _extends3.default)({}, props, { renderUnicode: this.options.renderUnicode }));
		"use strict";
		var __extends = (this && this.__extends) \|\| (function () {
		var extendStatics = Object.setPrototypeOf \|\|
		({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) \|\|
		function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
		return function (d, b) {
		extendStatics(d, b);
		function __() { this.constructor = d; }
		d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
		};
		})();
		var __assign = (this && this.__assign) \|\| Object.assign \|\| function(t) {
		for (var s, i = 1, n = arguments.length; i < n; i++) {
		s = arguments[i];
		for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
		t[p] = s[p];
		}
		}, {
		key: 'asTag',
		value: function asTag() {
		return 'img';
		return t;
		};
		var __importDefault = (this && this.__importDefault) \|\| function (mod) {
		return (mod && mod.__esModule) ? mod : { "default": mod };
		};
		Object.defineProperty(exports, "__esModule", { value: true });
		var react_1 = __importDefault(require("react"));
		var interweave_1 = require("interweave");
		var emojibase_regex_1 = __importDefault(require("emojibase-regex"));
		var emoticon_1 = __importDefault(require("emojibase-regex/emoticon"));
		var shortcode_1 = __importDefault(require("emojibase-regex/shortcode"));
		var Emoji_1 = __importDefault(require("./Emoji"));
		var EmojiDataManager_1 = __importDefault(require("./EmojiDataManager"));
		var EMOTICON_BOUNDARY_REGEX = new RegExp("(^\|\\\b\|\\s)(" + emoticon_1.default.source + ")(?=\\s\|\\\b\|$)");
		var EmojiMatcher = (function (_super) {
		__extends(EmojiMatcher, _super);
		function EmojiMatcher(name, options, factory) {
		if (options === void 0) { options = {}; }
		if (factory === void 0) { factory = null; }
		var _this = _super.call(this, name, __assign({ convertEmoticon: false, convertShortcode: false, convertUnicode: false, enlargeThreshold: 1, renderUnicode: false }, options), factory) \|\| this;
		_this.data = null;
		return _this;
		}
		}, {
		key: 'match',
		value: function match(string) {
		var _this2 = this;

		var matchers = [];
		var response = null;

		if (this.options.convertEmoticon) {
		matchers.push(this.matchEmoticon);
		}

		if (this.options.convertShortcode) {
		matchers.push(this.matchShortcode);
		}

		if (this.options.convertUnicode) {
		matchers.push(this.matchUnicode);
		}

		matchers.some(function (matcher) {
		response = matcher.call(_this2, string);

		return !!response;
		});

		return response;
		}
		}, {
		key: 'matchEmoticon',
		value: function matchEmoticon(string) {
		var response = this.doMatch(string, EMOTICON_BOUNDARY_REGEX, function (matches) {
		return {
		emoticon: matches[0].trim()
		};
		});

		if (response && response.emoticon && this.data.EMOTICON_TO_HEXCODE[response.emoticon]) {
		response.hexcode = this.data.EMOTICON_TO_HEXCODE[response.emoticon];
		response.match = response.emoticon;

		EmojiMatcher.prototype.replaceWith = function (match, props) {
		if (props === void 0) { props = {}; }
		var emojiProps = __assign({}, props, { renderUnicode: this.options.renderUnicode });
		return react_1.default.createElement(Emoji_1.default, emojiProps);
		};
		EmojiMatcher.prototype.asTag = function () {
		return 'img';
		};
		EmojiMatcher.prototype.match = function (string) {
		var _this = this;
		var matchers = [];
		var response = null;
		if (this.options.convertEmoticon) {
		matchers.push(this.matchEmoticon);
		}
		if (this.options.convertShortcode) {
		matchers.push(this.matchShortcode);
		}
		if (this.options.convertUnicode) {
		matchers.push(this.matchUnicode);
		}
		matchers.some(function (matcher) {
		response = matcher.call(_this, string);
		return !!response;
		});
		return response;
		}

		return null;
		}
		}, {
		key: 'matchShortcode',
		value: function matchShortcode(string) {
		var response = this.doMatch(string, _shortcode2.default, function (matches) {
		return {
		shortcode: matches[0].toLowerCase()
		};
		});

		if (response && response.shortcode && this.data.SHORTCODE_TO_HEXCODE[response.shortcode]) {
		response.hexcode = this.data.SHORTCODE_TO_HEXCODE[response.shortcode];

		return response;
		}

		return null;
		}
		}, {
		key: 'matchUnicode',
		value: function matchUnicode(string) {
		var response = this.doMatch(string, _emojibaseRegex2.default, function (matches) {
		return {
		unicode: matches[0]
		};
		});

		if (response && response.unicode && this.data.UNICODE_TO_HEXCODE[response.unicode]) {
		response.hexcode = this.data.UNICODE_TO_HEXCODE[response.unicode];

		return response;
		}

		return null;
		}
		}, {
		key: 'onBeforeParse',
		value: function onBeforeParse(content, props) {
		if (props.emojiSource) {
		this.data = _EmojiData2.default.getInstance(props.emojiSource.locale);
		} else if ("production" !== process.env.NODE_ENV) {
		throw new Error('Missing emoji source data. Have you loaded using `withEmojiData`?');
		}

		return content;
		}
		}, {
		key: 'onAfterParse',
		value: function onAfterParse(content, props) {
		if (content.length === 0) {
		};
		EmojiMatcher.prototype.matchEmoticon = function (string) {
		var response = this.doMatch(string, EMOTICON_BOUNDARY_REGEX, function (matches) { return ({
		emoticon: matches[0].trim(),
		}); });
		if (response &&
		response.emoticon &&
		this.data &&
		this.data.EMOTICON_TO_HEXCODE[response.emoticon]) {
		response.hexcode = this.data.EMOTICON_TO_HEXCODE[response.emoticon];
		response.match = response.emoticon;
		return response;
		}
		return null;
		};
		EmojiMatcher.prototype.matchShortcode = function (string) {
		var response = this.doMatch(string, shortcode_1.default, function (matches) { return ({
		shortcode: matches[0].toLowerCase(),
		}); });
		if (response &&
		response.shortcode &&
		this.data &&
		this.data.SHORTCODE_TO_HEXCODE[response.shortcode]) {
		response.hexcode = this.data.SHORTCODE_TO_HEXCODE[response.shortcode];
		return response;
		}
		return null;
		};
		EmojiMatcher.prototype.matchUnicode = function (string) {
		var response = this.doMatch(string, emojibase_regex_1.default, function (matches) { return ({
		unicode: matches[0],
		}); });
		if (response &&
		response.unicode &&
		this.data &&
		this.data.UNICODE_TO_HEXCODE[response.unicode]) {
		response.hexcode = this.data.UNICODE_TO_HEXCODE[response.unicode];
		return response;
		}
		return null;
		};
		EmojiMatcher.prototype.onBeforeParse = function (content, props) {
		if (props.emojiSource) {
		this.data = EmojiDataManager_1.default.getInstance(props.emojiSource.locale);
		}
		else if (process.env.NODE_ENV !== 'production') {
		throw new Error('Missing emoji source data. Have you loaded using `withEmojiData`?');
		}
		return content;
		}

		var enlargeThreshold = this.options.enlargeThreshold;

		var valid = false;
		var count = 0;

		for (var i = 0, item = null; i < content.length; i += 1) {
		item = content[i];

		if (typeof item === 'string') {
		if (!item.match(/^\s+$/)) {
		valid = false;
		break;
		}
		} else if (_react2.default.isValidElement(item)) {
		if (item && item.type === _Emoji2.default) {
		count += 1;
		valid = true;

		if (count > enlargeThreshold) {
		valid = false;
		break;
		};
		EmojiMatcher.prototype.onAfterParse = function (content, props) {
		if (content.length === 0) {
		return content;
		}
		var enlargeThreshold = this.options.enlargeThreshold;
		var valid = false;
		var count = 0;
		for (var i = 0, item = null; i < content.length; i += 1) {
		item = content[i];
		if (typeof item === 'string') {
		if (!item.match(/^\s+$/)) {
		valid = false;
		break;
		}
		}
		} else {
		valid = false;
		break;
		}
		} else {
		valid = false;
		break;
		else if (react_1.default.isValidElement(item)) {
		if (item && item.type === Emoji_1.default) {
		count += 1;
		valid = true;
		if (count > enlargeThreshold) {
		valid = false;
		break;
		}
		}
		else {
		valid = false;
		break;
		}
		}
		else {
		valid = false;
		break;
		}
		}
		}

		if (!valid) {
		return content;
		}

		return content.map(function (item) {
		if (!item \|\| typeof item === 'string') {
		return item;
		if (!valid) {
		return content;
		}

		return _react2.default.cloneElement(item, (0, _extends3.default)({}, item.props, {
		enlargeEmoji: true
		}));
		});
		}
		}]);
		return EmojiMatcher;
		}(_interweave.Matcher);

		exports.default = EmojiMatcher;
		return content.map(function (item) {
		if (!item \|\| typeof item === 'string') {
		return item;
		}
		var element = item;
		return react_1.default.cloneElement(element, __assign({}, element.props, { enlargeEmoji: true }));
		});
		};
		return EmojiMatcher;
		}(interweave_1.Matcher));
		exports.default = EmojiMatcher;

57

lib/index.js

		@@ -1,40 +0,17 @@
		'use strict';

		Object.defineProperty(exports, "__esModule", {
		value: true
		});
		exports.EmojiSourceShape = exports.EmojiSizeShape = exports.EmojiPathShape = exports.EmojiShape = exports.EmojiMatcher = exports.EmojiData = exports.withEmojiData = undefined;

		var _Emoji = require('./Emoji');

		var _Emoji2 = _interopRequireDefault(_Emoji);

		var _EmojiData = require('./EmojiData');

		var _EmojiData2 = _interopRequireDefault(_EmojiData);

		var _EmojiMatcher = require('./EmojiMatcher');

		var _EmojiMatcher2 = _interopRequireDefault(_EmojiMatcher);

		var _withEmojiData = require('./withEmojiData');

		var _withEmojiData2 = _interopRequireDefault(_withEmojiData);

		var _shapes = require('./shapes');

		function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

		exports.withEmojiData = _withEmojiData2.default;
		exports.EmojiData = _EmojiData2.default;
		exports.EmojiMatcher = _EmojiMatcher2.default;
		exports.EmojiShape = _shapes.EmojiShape;
		exports.EmojiPathShape = _shapes.EmojiPathShape;
		exports.EmojiSizeShape = _shapes.EmojiSizeShape;
		exports.EmojiSourceShape = _shapes.EmojiSourceShape; /**
		* @copyright 2016, Miles Johnson
		* @license https://opensource.org/licenses/MIT
		*
		*/

		exports.default = _Emoji2.default;
		"use strict";
		function __export(m) {
		for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
		}
		var __importDefault = (this && this.__importDefault) \|\| function (mod) {
		return (mod && mod.__esModule) ? mod : { "default": mod };
		};
		Object.defineProperty(exports, "__esModule", { value: true });
		var Emoji_1 = __importDefault(require("./Emoji"));
		var EmojiDataManager_1 = __importDefault(require("./EmojiDataManager"));
		exports.EmojiDataManager = EmojiDataManager_1.default;
		var EmojiMatcher_1 = __importDefault(require("./EmojiMatcher"));
		exports.EmojiMatcher = EmojiMatcher_1.default;
		var withEmojiData_1 = __importDefault(require("./withEmojiData"));
		exports.withEmojiData = withEmojiData_1.default;
		__export(require("./shapes"));
		exports.default = Emoji_1.default;

83

lib/shapes.js

		@@ -1,52 +0,35 @@
		'use strict';

		Object.defineProperty(exports, "__esModule", {
		value: true
		"use strict";
		var __importDefault = (this && this.__importDefault) \|\| function (mod) {
		return (mod && mod.__esModule) ? mod : { "default": mod };
		};
		Object.defineProperty(exports, "__esModule", { value: true });
		var prop_types_1 = __importDefault(require("prop-types"));
		var emojibase_1 = require("emojibase");
		exports.EmojiShape = prop_types_1.default.shape({
		annotation: prop_types_1.default.string,
		canonical_shortcodes: prop_types_1.default.arrayOf(prop_types_1.default.string),
		emoji: prop_types_1.default.string,
		emoticon: prop_types_1.default.string,
		gender: prop_types_1.default.number,
		group: prop_types_1.default.number,
		hexcode: prop_types_1.default.string,
		name: prop_types_1.default.string,
		order: prop_types_1.default.number,
		primary_shortcode: prop_types_1.default.string,
		shortcodes: prop_types_1.default.arrayOf(prop_types_1.default.string),
		skins: prop_types_1.default.arrayOf(prop_types_1.default.object),
		subgroup: prop_types_1.default.number,
		tags: prop_types_1.default.arrayOf(prop_types_1.default.string),
		text: prop_types_1.default.string,
		tone: prop_types_1.default.number,
		type: prop_types_1.default.number,
		unicode: prop_types_1.default.string,
		version: prop_types_1.default.number,
		});
		exports.EmojiSourceShape = exports.EmojiSizeShape = exports.EmojiPathShape = exports.EmojiShape = undefined;

		var _propTypes = require('prop-types');

		var _propTypes2 = _interopRequireDefault(_propTypes);

		var _constants = require('emojibase/lib/constants');

		function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

		/**
		* @copyright 2016, Miles Johnson
		* @license https://opensource.org/licenses/MIT
		*
		*/

		var EmojiShape = exports.EmojiShape = _propTypes2.default.shape({
		annotation: _propTypes2.default.string,
		canonical_shortcodes: _propTypes2.default.arrayOf(_propTypes2.default.string),
		emoji: _propTypes2.default.string,
		emoticon: _propTypes2.default.string,
		gender: _propTypes2.default.number,
		group: _propTypes2.default.number,
		hexcode: _propTypes2.default.string,
		name: _propTypes2.default.string,
		order: _propTypes2.default.number,
		primary_shortcode: _propTypes2.default.string,
		shortcodes: _propTypes2.default.arrayOf(_propTypes2.default.string),
		skins: _propTypes2.default.arrayOf(_propTypes2.default.object),
		subgroup: _propTypes2.default.number,
		tags: _propTypes2.default.arrayOf(_propTypes2.default.string),
		text: _propTypes2.default.string,
		tone: _propTypes2.default.number,
		type: _propTypes2.default.number,
		unicode: _propTypes2.default.string,
		version: _propTypes2.default.number
		exports.PathShape = prop_types_1.default.oneOfType([prop_types_1.default.string, prop_types_1.default.func]);
		exports.SizeShape = prop_types_1.default.oneOfType([prop_types_1.default.string, prop_types_1.default.number]);
		exports.SourceShape = prop_types_1.default.shape({
		compact: prop_types_1.default.bool.isRequired,
		locale: prop_types_1.default.oneOf(emojibase_1.SUPPORTED_LOCALES).isRequired,
		version: prop_types_1.default.string.isRequired,
		});

		var EmojiPathShape = exports.EmojiPathShape = _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.func]);

		var EmojiSizeShape = exports.EmojiSizeShape = _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number]);

		var EmojiSourceShape = exports.EmojiSourceShape = _propTypes2.default.shape({
		compact: _propTypes2.default.bool.isRequired,
		locale: _propTypes2.default.oneOf(_constants.SUPPORTED_LOCALES).isRequired,
		version: _propTypes2.default.string.isRequired
		});

320

lib/withEmojiData.js

		@@ -1,188 +0,142 @@
		'use strict';

		Object.defineProperty(exports, "__esModule", {
		value: true
		});

		var _extends2 = require('babel-runtime/helpers/extends');

		var _extends3 = _interopRequireDefault(_extends2);

		var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');

		var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);

		var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');

		var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

		var _createClass2 = require('babel-runtime/helpers/createClass');

		var _createClass3 = _interopRequireDefault(_createClass2);

		var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');

		var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

		var _inherits2 = require('babel-runtime/helpers/inherits');

		var _inherits3 = _interopRequireDefault(_inherits2);

		exports.resetLoaded = resetLoaded;
		exports.default = withEmojiData;

		var _react = require('react');

		var _react2 = _interopRequireDefault(_react);

		var _propTypes = require('prop-types');

		var _propTypes2 = _interopRequireDefault(_propTypes);

		var _emojibase = require('emojibase');

		var _constants = require('emojibase/lib/constants');

		var _EmojiData = require('./EmojiData');

		var _EmojiData2 = _interopRequireDefault(_EmojiData);

		var _shapes = require('./shapes');

		function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

		/**
		* @copyright 2016, Miles Johnson
		* @license https://opensource.org/licenses/MIT
		*
		*/

		"use strict";
		var __extends = (this && this.__extends) \|\| (function () {
		var extendStatics = Object.setPrototypeOf \|\|
		({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) \|\|
		function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
		return function (d, b) {
		extendStatics(d, b);
		function __() { this.constructor = d; }
		d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
		};
		})();
		var __assign = (this && this.__assign) \|\| Object.assign \|\| function(t) {
		for (var s, i = 1, n = arguments.length; i < n; i++) {
		s = arguments[i];
		for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
		t[p] = s[p];
		}
		return t;
		};
		var __rest = (this && this.__rest) \|\| function (s, e) {
		var t = {};
		for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
		t[p] = s[p];
		if (s != null && typeof Object.getOwnPropertySymbols === "function")
		for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) if (e.indexOf(p[i]) < 0)
		t[p[i]] = s[p[i]];
		return t;
		};
		var __importDefault = (this && this.__importDefault) \|\| function (mod) {
		return (mod && mod.__esModule) ? mod : { "default": mod };
		};
		Object.defineProperty(exports, "__esModule", { value: true });
		var react_1 = __importDefault(require("react"));
		var prop_types_1 = __importDefault(require("prop-types"));
		var emojibase_1 = require("emojibase");
		var constants_1 = require("emojibase/lib/constants");
		var EmojiDataManager_1 = __importDefault(require("./EmojiDataManager"));
		var shapes_1 = require("./shapes");
		var loaded = {};
		var promise = {};

		function resetLoaded() {
		if ("production" !== process.env.NODE_ENV) {
		loaded = {};
		promise = {};
		}
		if (process.env.NODE_ENV !== 'production') {
		loaded = {};
		promise = {};
		}
		}

		exports.resetLoaded = resetLoaded;
		function withEmojiData(Component) {
		var _class, _temp2;

		return _temp2 = _class = function (_React$PureComponent) {
		(0, _inherits3.default)(EmojiDataLoader, _React$PureComponent);

		function EmojiDataLoader() {
		var _ref;

		var _temp, _this, _ret;

		(0, _classCallCheck3.default)(this, EmojiDataLoader);

		for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
		args[_key] = arguments[_key];
		}

		return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, (_ref = EmojiDataLoader.__proto__ \|\| Object.getPrototypeOf(EmojiDataLoader)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
		emojis: []
		}, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret);
		}

		(0, _createClass3.default)(EmojiDataLoader, [{
		key: 'componentDidMount',
		value: function componentDidMount() {
		this.loadEmojis();
		}
		}, {
		key: 'componentDidUpdate',
		value: function componentDidUpdate(prevProps) {
		var _props = this.props,
		compact = _props.compact,
		emojis = _props.emojis,
		locale = _props.locale,
		version = _props.version;


		if (prevProps.compact !== compact \|\| prevProps.emojis !== emojis \|\| prevProps.locale !== locale \|\| prevProps.version !== version) {
		this.loadEmojis();
		}
		}
		}, {
		key: 'getDataInstance',
		value: function getDataInstance() {
		return _EmojiData2.default.getInstance(this.props.locale);
		}
		}, {
		key: 'loadEmojis',
		value: function loadEmojis() {
		var _this2 = this;

		var _props2 = this.props,
		compact = _props2.compact,
		emojis = _props2.emojis,
		locale = _props2.locale,
		version = _props2.version;

		if (loaded[locale]) {
		this.setEmojis(emojis);
		} else if (promise[locale]) {
		promise[locale].then(function () {
		_this2.setEmojis(emojis);
		}).catch(function (error) {
		throw error;
		});
		} else {
		promise[locale] = (0, _emojibase.fetchFromCDN)(locale + '/' + (compact ? 'compact' : 'data') + '.json', version).then(function (response) {
		loaded[locale] = true;

		_this2.getDataInstance().parseEmojiData(response);
		_this2.setEmojis(emojis);
		}).catch(function (error) {
		throw error;
		});
		}
		}
		}, {
		key: 'setEmojis',
		value: function setEmojis() {
		var emojis = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];

		this.setState({
		emojis: emojis.length > 0 ? emojis : this.getDataInstance().getData()
		});
		}
		}, {
		key: 'render',
		value: function render() {
		var _props3 = this.props,
		compact = _props3.compact,
		emojis = _props3.emojis,
		locale = _props3.locale,
		version = _props3.version,
		props = (0, _objectWithoutProperties3.default)(_props3, ['compact', 'emojis', 'locale', 'version']);


		return _react2.default.createElement(Component, (0, _extends3.default)({}, props, {
		emojis: this.state.emojis,
		emojiSource: {
		compact: compact,
		locale: locale,
		version: version
		}
		}));
		}
		}]);
		return EmojiDataLoader;
		}(_react2.default.PureComponent), _class.propTypes = {
		compact: _propTypes2.default.bool,
		emojis: _propTypes2.default.arrayOf(_shapes.EmojiShape),
		locale: _propTypes2.default.oneOf(_constants.SUPPORTED_LOCALES),
		version: _propTypes2.default.string
		}, _class.defaultProps = {
		compact: false,
		emojis: [],
		locale: 'en',
		version: 'latest'
		}, _temp2;
		}
		var _a;
		return _a = (function (_super) {
		__extends(EmojiData, _super);
		function EmojiData() {
		var _this = _super !== null && _super.apply(this, arguments) \|\| this;
		_this.state = {
		emojis: [],
		source: {
		compact: false,
		locale: 'en',
		version: 'latest',
		},
		};
		return _this;
		}
		EmojiData.prototype.componentDidMount = function () {
		this.loadEmojis();
		};
		EmojiData.prototype.componentDidUpdate = function (prevProps) {
		var _a = this.props, compact = _a.compact, emojis = _a.emojis, locale = _a.locale, version = _a.version;
		if (prevProps.compact !== compact \|\|
		prevProps.emojis !== emojis \|\|
		prevProps.locale !== locale \|\|
		prevProps.version !== version) {
		this.loadEmojis();
		}
		};
		EmojiData.prototype.getDataInstance = function () {
		return EmojiDataManager_1.default.getInstance(this.props.locale);
		};
		EmojiData.prototype.setEmojis = function (emojis) {
		if (emojis === void 0) { emojis = []; }
		var _a = this.props, compact = _a.compact, locale = _a.locale, version = _a.version;
		this.setState({
		emojis: emojis.length > 0 ? emojis : this.getDataInstance().getData(),
		source: {
		compact: compact,
		locale: locale,
		version: version,
		},
		});
		};
		EmojiData.prototype.loadEmojis = function () {
		var _this = this;
		var _a = this.props, compact = _a.compact, emojis = _a.emojis, locale = _a.locale, version = _a.version;
		if (loaded[locale]) {
		this.setEmojis(emojis);
		}
		else if (promise[locale]) {
		promise[locale]
		.then(function () {
		_this.setEmojis(emojis);
		})
		.catch(function (error) {
		throw error;
		});
		}
		else {
		promise[locale] = emojibase_1.fetchFromCDN(locale + "/" + (compact ? 'compact' : 'data') + ".json", version)
		.then(function (response) {
		loaded[locale] = true;
		_this.getDataInstance().parseEmojiData(response);
		_this.setEmojis(emojis);
		return response;
		})
		.catch(function (error) {
		throw error;
		});
		}
		};
		EmojiData.prototype.render = function () {
		var _a = this.props, compact = _a.compact, emojis = _a.emojis, locale = _a.locale, version = _a.version, props = __rest(_a, ["compact", "emojis", "locale", "version"]);
		if (this.state.emojis.length === 0) {
		return null;
		}
		return (react_1.default.createElement(Component, __assign({}, props, { emojis: this.state.emojis, emojiData: this.getDataInstance(), emojiSource: this.state.source })));
		};
		return EmojiData;
		}(react_1.default.PureComponent)),
		_a.propTypes = {
		compact: prop_types_1.default.bool,
		emojis: prop_types_1.default.arrayOf(shapes_1.EmojiShape),
		locale: prop_types_1.default.oneOf(constants_1.SUPPORTED_LOCALES),
		version: prop_types_1.default.string,
		},
		_a.defaultProps = {
		compact: false,
		emojis: [],
		locale: 'en',
		version: 'latest',
		},
		_a;
		}
		exports.default = withEmojiData;

20

package.json

		{
		"name": "interweave-emoji",
		"version": "1.4.0",
		"version": "2.0.0-0",
		"description": "Emoji support for Interweave.",
		@@ -12,4 +12,5 @@ "keywords": [
		"main": "./lib/index.js",
		"scripts": {
		"build": "build-lib --react"
		"types": "./lib/index.d.ts",
		"publishConfig": {
		"access": "public"
		},
		@@ -20,16 +21,15 @@ "repository": "https://github.com/milesj/interweave/tree/master/packages/interweave-emoji",
		"babel-runtime": "^6.26.0",
		"emojibase-regex": "^1.0.9",
		"emojibase-regex": "^1.1.1",
		"prop-types": "^15.6.1"
		},
		"peerDependencies": {
		"emojibase": "^1.4.0",
		"emojibase": "^1.7.0",
		"interweave": "^8.0.2",
		"react": "^15.3.0 \|\| ^16.0.0"
		"react": "^16.3.0"
		},
		"devDependencies": {
		"@milesj/build-tool-config": "^0.50.0",
		"emojibase": "^1.5.0",
		"interweave": "^8.1.0",
		"react": "^16.3.2"
		"emojibase": "^1.7.1",
		"interweave": "^9.0.0-0",
		"react": "^16.4.0"
		}
		}

189

README.md

		# Interweave with Emoji

		> Provides emoji support for [Interweave](https://github.com/milesj/interweave).
		Provides emoji support for [Interweave](https://github.com/milesj/interweave).

		Who loves emojis? Everyone loves emojis. This package provides support for rendering emoji,
		either their unicode character, or with SVG/PNGs. It utilizes [Emojibase][emojibase] for
		accurate and up-to-date data.

		## Requirements

		* React 15/16+
		* Interweave
		* [Emojibase][emojibase]
		- [Emojibase](https://github.com/milesj/emojibase)

		@@ -18,5 +12,5 @@ ## Installation
		```
		yarn add interweave interweave-emoji emojibase
		// Or
		npm install interweave interweave-emoji emojibase --save
		// Or
		yarn add interweave interweave-emoji emojibase
		```
		@@ -26,175 +20,2 @@

		* [Matching Emojis](#matching-emojis)
		* [Props](#props)
		* [Match Result](#match-result)
		* [Loading Emoji Data](#loading-emoji-data)
		* [Converting Emoticons](#converting-emoticons)
		* [Converting Shortcodes](#converting-shortcodes)
		* [Displaying SVGs or PNGs](#displaying-svgs-or-pngs)
		* [Displaying Unicode Characters](#displaying-unicode-characters)
		* [Automatic Enlargement](#automatic-enlargement)

		### Matching Emojis

		The `EmojiMatcher` makes use of complex regex patterns provided by Emojibase to find and
		replace emoji unicode sequences with SVN/PNGS.

		```javascript
		import Interweave from 'interweave';
		import { EmojiMatcher } from 'interweave-emoji';

		<Interweave matchers={[new EmojiMatcher('emoji')]} />
		```

		#### Props

		The following props are available for `Emoji` components, all of which should be passed
		to an `Interweave` instance.

		* `emojiSize` (string \| number) - The width and height of emojis. Defaults to `1em`.
		* `emojiLargeSize` (string \| number) - The width and height of enlarged emojis. Defaults to `3em`.
		* `emojiPath` (string \| func) - A path to the [PNG or SVG file](#displaying-svgs-or-pngs).
		* `enlargeEmoji` (bool) - Whether to enlarge the emoji or not. Automatically triggers
		via the matcher but can be forced with this prop. Defaults to `false`.
		* `renderUnicode` (bool) - Render the unicode character instead of an image. Defaults to `false`.

		#### Match Result

		Both unicode literal characters and escape sequences are supported when matching.
		If a match is found, an `Emoji` component will be rendered and passed some of the following props.

		* `emoticon` (string) - If applicable, an emoticon for the specific emoji character.
		* `hexcode` (string) - The hexcode for the specific emoji character.
		* `shortcode` (string) - The shortcode for the specific emoji character.
		* `unicode` (string) - The unicode literal character.

		### Loading Emoji Data

		Before emoji can be rendered, emoji data must be loaded from a CDN. To do this,
		a `withEmojiData` higher-order-component (HOC) is provided, which will fetch emoji data
		from Emojibase's CDN. This HOC should wrap a component that composes `Interweave`.

		```javascript
		import Interweave from 'interweave';
		import { withEmojiData } from 'interweave-emoji';

		export default withEmojiData(Interweave);
		```

		This HOC supports the following optional props.

		* `locale` (string) - The localized data to fetch. Defaults to `en`.
		[View supported locales](https://github.com/milesj/emojibase#usage).
		* `version` (string) - The `emojibase-data` release version to fetch. Defaults to `latest`.
		[Read more](https://github.com/milesj/emojibase#fetchfromcdn).
		* `compact` (bool) - Whether to load compact or full data. Defaults to `false`.

		> An `emojis` and `emojiSource` prop will be passed to the underlying component.

		### Converting Emoticons

		Emoticons have been around longer than emoji, but emoji are much nicer to look at.
		Some emoji, not all, have an associated emoticon that can be converted to an
		emoji character. For example, `:)` would convert to 🙂.

		To enable conversion of an emoticon to a unicode literal character,
		pass the `convertEmoticon` option to the matcher.

		```javascript
		new EmojiMatcher('emoji', { convertEmoticon: true });
		```

		> A list of supported emoticons can be found in [emojibase](https://github.com/milesj/emojibase/blob/master/src/resources/emoticons.js).

		### Converting Shortcodes

		Shortcodes provide an easy non-unicode alternative for supporting emoji, and are represented
		by a word (or two) surrounded by two colons: `:boy:`.

		To enable conversion of a shortcode to a unicode literal character, pass the `convertShortcode`
		option to the matcher constructor.

		```javascript
		new EmojiMatcher('emoji', { convertShortcode: true });
		```

		> A list of supported shortcodes can be found in [emojibase](https://github.com/milesj/emojibase/blob/master/src/resources/shortcodes.js).

		### Displaying SVGs or PNGs

		To begin, we must enable conversion of unicode characters to media (images, vector, etc),
		by enabling the `convertUnicode` option. Secondly, if you want to support shortcodes
		or emoticons, enable `convertShortcode` or `convertEmoticon` respectively.

		```javascript
		new EmojiMatcher('emoji', {
		convertEmoticon: true,
		convertShortcode: true,
		convertUnicode: true,
		});
		```

		Now we need to provide an absolute path to the SVG/PNG file using the `emojiPath` prop.
		This path must contain a `{{hexcode}}` token, which will be replaced by the hexadecimal
		codepoint (hexcode) of the emoji.

		Or a function can be passed, which receives the hexcode as the 1st argument,
		`enlargeEmoji` value as the 2nd argument, `emojiSize` as the 3rd argument,
		and `emojiLargeSize` as the 4th argument.

		```javascript
		<Interweave
		emojiPath="https://example.com/images/emoji/{{hexcode}}.png"
		matchers={[new EmojiMatcher('emoji')]}
		/>

		// OR

		<Interweave
		emojiPath={hexcode => `https://example.com/images/emoji/${hexcode}.png`}
		matchers={[new EmojiMatcher('emoji')]}
		/>
		```

		Both media formats make use of the `img` tag and will require an individual file, as sprites and
		icon fonts are not supported. The following resources can be used for downloading SVG/PNG icons.

		* [EmojiOne](http://emojione.com/developers/)
		* [Twemoji](https://github.com/twitter/twemoji)

		> Note: SVGs require CORS to work correctly, so files will need to be stored locally,
		> or within a CDN under the same domain. Linking to remote SVGs will not work -- use PNGs instead.

		Lastly, to control the width and height of the `img`, use the `emojiSize` prop, which accepts a
		number or string. If a number is provided, it'll be passed down to React, which defaults to `px`.

		```javascript
		<Interweave emojiSize={32} emojiLargeSize={96} /> // 32px, 96px
		<Interweave emojiSize="1em" emojiLargeSize="3em" /> // 1em, 3em
		```

		> I suggest using `em` scaling as the emoji will scale relative to the text around it.

		### Displaying Unicode Characters

		To display native unicode characters as is, pass the `renderUnicode` option to the matcher
		constructor. This option will override the rendering of SVGs or PNGs, and works quite well
		alongside shortcode or emoticon conversion.

		```javascript
		new EmojiMatcher('emoji', { renderUnicode: true });
		```

		### Automatic Enlargement

		When an emoji is the only character within the content, it will automatically be enlarged.
		To disable this functionality, set `enlargeThreshold` to 0. Inversely, if you want to
		increase the threshold in which emojis are enlarged, increase the count.

		```javascript
		new EmojiMatcher('emoji', { enlargeThreshold: 3 });
		```

		For example, if `enlargeThreshold` is set to 3, and 3 emojis are found, all will be enlarged.

		[emojibase]: https://github.com/milesj/emojibase
		[https://milesj.gitbooks.io/interweave](https://milesj.gitbooks.io/interweave)

esm/Emoji.js

esm/EmojiData.js

esm/EmojiMatcher.js

esm/index.js

esm/shapes.js

esm/withEmojiData.js

interweave-emoji.js.flow

lib/EmojiData.js

src/Emoji.js

src/EmojiData.js

src/EmojiMatcher.js

src/index.js

src/shapes.js

src/withEmojiData.js

interweave-emoji - npm Package Compare versions

New alerts

Fixed alerts

Improved metrics

Worsened metrics

Dependency changes