diff --git a/README.md b/README.md
index 5207216..9d584f3 100644
--- a/README.md
+++ b/README.md
@@ -220,7 +220,7 @@ Following the `dangerouslySetInnerHTML` example above, make sure the wrapping `s
```
## Custom emojis
-You can provide custom emojis which will show up in their own category.
+You can provide custom emojis which will show up in their own category. You can either use a single image as imageUrl or use a spritesheet as shown in the second object.
```js
import { Picker } from 'emoji-mart'
@@ -234,6 +234,19 @@ const customEmojis = [
keywords: ['github'],
imageUrl: 'https://assets-cdn.github.com/images/icons/emoji/octocat.png?v7'
},
+ {
+ name: 'Test Flag',
+ short_names: ['test'],
+ text: '',
+ emoticons: [],
+ keywords: ['test', 'flag'],
+ spriteUrl: 'https://unpkg.com/emoji-datasource-twitter@4.0.4/img/twitter/sheets-256/64.png',
+ sheet_x: 1,
+ sheet_y: 1,
+ size: 64,
+ sheetColumns: 52,
+ sheetRows: 52,
+ },
]
diff --git a/docs/bundle.js b/docs/bundle.js
index 7fe6646..40c5106 100644
--- a/docs/bundle.js
+++ b/docs/bundle.js
@@ -412,6 +412,27 @@ process.umask = function() { return 0; };
/***/ }),
/* 8 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+var _Object = Object;
+
+/* harmony default export */ __webpack_exports__["a"] = (_Object.assign || function (target) {
+ for (var i = 1; i < arguments.length; i++) {
+ var source = arguments[i];
+
+ for (var key in source) {
+ if (Object.prototype.hasOwnProperty.call(source, key)) {
+ target[key] = source[key];
+ }
+ }
+ }
+
+ return target;
+});
+
+/***/ }),
+/* 9 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
@@ -452,27 +473,6 @@ emptyFunction.thatReturnsArgument = function (arg) {
module.exports = emptyFunction;
-/***/ }),
-/* 9 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-var _Object = Object;
-
-/* harmony default export */ __webpack_exports__["a"] = (_Object.assign || function (target) {
- for (var i = 1; i < arguments.length; i++) {
- var source = arguments[i];
-
- for (var key in source) {
- if (Object.prototype.hasOwnProperty.call(source, key)) {
- target[key] = source[key];
- }
- }
- }
-
- return target;
-});
-
/***/ }),
/* 10 */
/***/ (function(module, exports, __webpack_require__) {
@@ -538,13 +538,15 @@ module.exports = invariant;
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_react__ = __webpack_require__(0);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_react___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_react__);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1_prop_types__ = __webpack_require__(3);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1_prop_types___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_1_prop_types__);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__utils__ = __webpack_require__(13);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__utils_data__ = __webpack_require__(16);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__utils_shared_props__ = __webpack_require__(17);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__polyfills_extends__ = __webpack_require__(8);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1_react__ = __webpack_require__(0);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1_react___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_1_react__);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2_prop_types__ = __webpack_require__(3);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2_prop_types___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_2_prop_types__);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__utils__ = __webpack_require__(13);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__utils_data__ = __webpack_require__(16);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_5__utils_shared_props__ = __webpack_require__(17);
+
@@ -558,7 +560,7 @@ var _getData = function _getData(props) {
var set = props.set;
var data = props.data;
- return Object(__WEBPACK_IMPORTED_MODULE_2__utils__["b" /* getData */])(emoji, skin, set, data);
+ return Object(__WEBPACK_IMPORTED_MODULE_3__utils__["b" /* getData */])(emoji, skin, set, data);
};
var _getPosition = function _getPosition(props) {
@@ -578,7 +580,7 @@ var _getSanitizedData = function _getSanitizedData(props) {
var set = props.set;
var data = props.data;
- return Object(__WEBPACK_IMPORTED_MODULE_2__utils__["c" /* getSanitizedData */])(emoji, skin, set, data);
+ return Object(__WEBPACK_IMPORTED_MODULE_3__utils__["c" /* getSanitizedData */])(emoji, skin, set, data);
};
var _handleClick = function _handleClick(e, props) {
@@ -633,7 +635,7 @@ var _convertStyleToCSS = function _convertStyleToCSS(style) {
var NimbleEmoji = function NimbleEmoji(props) {
if (props.data.compressed) {
- Object(__WEBPACK_IMPORTED_MODULE_3__utils_data__["b" /* uncompress */])(props.data);
+ Object(__WEBPACK_IMPORTED_MODULE_4__utils_data__["b" /* uncompress */])(props.data);
}
for (var k in NimbleEmoji.defaultProps) {
@@ -675,7 +677,7 @@ var NimbleEmoji = function NimbleEmoji(props) {
if (props.native && unified) {
className += ' emoji-mart-emoji-native';
style = { fontSize: props.size };
- children = Object(__WEBPACK_IMPORTED_MODULE_2__utils__["f" /* unifiedToNative */])(unified);
+ children = Object(__WEBPACK_IMPORTED_MODULE_3__utils__["f" /* unifiedToNative */])(unified);
if (props.forceSize) {
style.display = 'inline-block';
@@ -687,10 +689,20 @@ var NimbleEmoji = function NimbleEmoji(props) {
style = {
width: props.size,
height: props.size,
- display: 'inline-block',
- backgroundImage: 'url(' + imageUrl + ')',
- backgroundSize: 'contain'
+ display: 'inline-block'
};
+ if (data.spriteUrl) {
+ style = Object(__WEBPACK_IMPORTED_MODULE_0__polyfills_extends__["a" /* default */])({}, style, {
+ backgroundImage: 'url(' + data.spriteUrl + ')',
+ backgroundSize: 100 * props.sheetColumns + '% ' + 100 * props.sheetRows + '%',
+ backgroundPosition: _getPosition(props)
+ });
+ } else {
+ style = Object(__WEBPACK_IMPORTED_MODULE_0__polyfills_extends__["a" /* default */])({}, style, {
+ backgroundImage: 'url(' + imageUrl + ')',
+ backgroundSize: 'contain'
+ });
+ }
} else {
var setHasEmoji = data['has_img_' + props.set] == undefined || data['has_img_' + props.set];
@@ -716,7 +728,7 @@ var NimbleEmoji = function NimbleEmoji(props) {
style = _convertStyleToCSS(style);
return '' + (children || '') + '';
} else {
- return __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
+ return __WEBPACK_IMPORTED_MODULE_1_react___default.a.createElement(
'span',
{
key: props.emoji.id || props.emoji,
@@ -732,7 +744,7 @@ var NimbleEmoji = function NimbleEmoji(props) {
title: title,
className: className
},
- __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
+ __WEBPACK_IMPORTED_MODULE_1_react___default.a.createElement(
'span',
{ style: style },
children
@@ -741,7 +753,7 @@ var NimbleEmoji = function NimbleEmoji(props) {
}
};
-NimbleEmoji.defaultProps = __WEBPACK_IMPORTED_MODULE_4__utils_shared_props__["a" /* EmojiDefaultProps */];
+NimbleEmoji.defaultProps = __WEBPACK_IMPORTED_MODULE_5__utils_shared_props__["a" /* EmojiDefaultProps */];
/* harmony default export */ __webpack_exports__["a"] = (NimbleEmoji);
@@ -1090,7 +1102,7 @@ module.exports = emptyObject;
-var emptyFunction = __webpack_require__(8);
+var emptyFunction = __webpack_require__(9);
/**
* Similar to invariant but only logs a warning if the condition is not met.
@@ -1945,7 +1957,7 @@ function get(perLine) {
* @typechecks
*/
-var emptyFunction = __webpack_require__(8);
+var emptyFunction = __webpack_require__(9);
/**
* Upstream version of event listener. Does not take into account specific
@@ -2236,7 +2248,7 @@ module.exports = function (it) {
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__polyfills_extends__ = __webpack_require__(9);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__polyfills_extends__ = __webpack_require__(8);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__polyfills_objectGetPrototypeOf__ = __webpack_require__(4);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2_babel_runtime_helpers_classCallCheck__ = __webpack_require__(1);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2_babel_runtime_helpers_classCallCheck___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_2_babel_runtime_helpers_classCallCheck__);
@@ -3087,7 +3099,7 @@ var search = {
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__polyfills_extends__ = __webpack_require__(9);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__polyfills_extends__ = __webpack_require__(8);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__polyfills_objectGetPrototypeOf__ = __webpack_require__(4);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2_babel_runtime_helpers_classCallCheck__ = __webpack_require__(1);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2_babel_runtime_helpers_classCallCheck___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_2_babel_runtime_helpers_classCallCheck__);
@@ -3440,7 +3452,7 @@ Skins.defaultProps = {
"use strict";
Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__src_polyfills_extends__ = __webpack_require__(9);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__src_polyfills_extends__ = __webpack_require__(8);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__src_polyfills_objectGetPrototypeOf__ = __webpack_require__(4);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2_babel_runtime_helpers_classCallCheck__ = __webpack_require__(1);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2_babel_runtime_helpers_classCallCheck___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_2_babel_runtime_helpers_classCallCheck__);
@@ -3478,6 +3490,16 @@ var CUSTOM_EMOJIS = [{
short_names: ['shipit', 'squirrel'],
keywords: ['github'],
imageUrl: 'https://assets-cdn.github.com/images/icons/emoji/shipit.png?v7'
+}, {
+ name: 'Test Flag',
+ short_names: ['test'],
+ keywords: ['test', 'flag'],
+ spriteUrl: 'https://unpkg.com/emoji-datasource-twitter@4.0.4/img/twitter/sheets-256/64.png',
+ sheet_x: 1,
+ sheet_y: 1,
+ size: 64,
+ sheetColumns: 52,
+ sheetRows: 52
}];
var Example = function (_React$Component) {
@@ -3572,7 +3594,7 @@ __WEBPACK_IMPORTED_MODULE_7_react_dom___default.a.render(__WEBPACK_IMPORTED_MODU
This source code is licensed under the MIT license found in the
LICENSE file in the root directory of this source tree.
*/
-var f=__webpack_require__(12),p=__webpack_require__(14);__webpack_require__(10);var r=__webpack_require__(8);
+var f=__webpack_require__(12),p=__webpack_require__(14);__webpack_require__(10);var r=__webpack_require__(9);
function t(a){for(var b=arguments.length-1,d="Minified React error #"+a+"; visit http://facebook.github.io/react/docs/error-decoder.html?invariant\x3d"+a,e=0;e {
width: props.size,
height: props.size,
display: 'inline-block',
- backgroundImage: `url(${imageUrl})`,
- backgroundSize: 'contain',
+ }
+ if (data.spriteUrl) {
+ style = {
+ ...style,
+ backgroundImage: `url(${data.spriteUrl})`,
+ backgroundSize: `${100 * props.sheetColumns}% ${100 *
+ props.sheetRows}%`,
+ backgroundPosition: _getPosition(props),
+ }
+ } else {
+ style = {
+ ...style,
+ backgroundImage: `url(${imageUrl})`,
+ backgroundSize: 'contain',
+ }
}
} else {
let setHasEmoji =
@@ -149,7 +162,8 @@ const NimbleEmoji = (props) => {
props.set,
props.sheetSize,
)})`,
- backgroundSize: `${100 * props.sheetColumns}% ${100 * props.sheetRows}%`,
+ backgroundSize: `${100 * props.sheetColumns}% ${100 *
+ props.sheetRows}%`,
backgroundPosition: _getPosition(props),
}
}
diff --git a/src/index.js b/src/index.js
index 7df17f8..57d4bfb 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,5 +1,7 @@
export { default as emojiIndex } from './utils/emoji-index/emoji-index'
-export { default as NimbleEmojiIndex } from './utils/emoji-index/nimble-emoji-index'
+export {
+ default as NimbleEmojiIndex,
+} from './utils/emoji-index/nimble-emoji-index'
export { default as store } from './utils/store'
export { default as frequently } from './utils/frequently'