diff --git a/README.md b/README.md
index 1747af34..b6a7a39c 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,4 @@
-# React Emoji Picker
+# React Emoji Picker V2.0.0
[](https://greenkeeper.io/) [](https://badge.fury.io/js/emoji-picker-react) [](https://travis-ci.org/ealush/emoji-picker-react)
@@ -6,14 +6,20 @@
+## V2 Changes
+* Updated UI
+* Removed customization props, moved to SASS variables
+* Improved filtering performance
+
+
```
npm i emoji-picker-react --save
```
An easy to use React Emoji Picker Module.
-For easy integration with your app, you should consider using the companion package: [React Text field components with emoji picker](https://www.npmjs.com/package/emoji-picker-textfield).
-
+
+
## Usage:
@@ -32,22 +38,38 @@ class MyComponent extends Component {
```
-## Customization
+## UI Customization
+You can use custom CSS to modify each part of the picker's visibility.
+**COMPATABILITY NOTE**
+The markup of the picker is guaranteed to stay unchanged through each major version (with the exception of bugfixes), meaning you can safely assume the markup stays the same until version 3 gets released.
-## Modifying the picker's height and width
-By default the picker is 240px wide and ~315px tall (depending on the position of the categories panel). To change the width and height of the picker, simply:
+### Customizatio via SCSS variables
+If your project uses SCSS, you can more easily customize your picker's visibility using the predefined [SASS variables](https://github.com/ealush/emoji-picker-react/blob/master/src/base.scss) (click to see all variables).
+To customize the picker using these variables, you will need to import the picker in two parts - js and css.
```js
-
- // width will default to 240
- // height will default to 240
+// MyComponent.js
+import EmojiPicker from 'emoji-picker-react';
+import 'emoji-picker-react/dist/universal/style.scss'; // or any other way you consume scss files
+
+class MyComponent {
+// ...
+}
```
-If you chose a width that cannot fit a whole emoji at the end of each row (when you only leave room for 6.5 emojis, for example), the line will end at the last fully visible emoji, possibly leaving some empty space on the right. To resolve that, just increase or decrease the width of the picker to reach a perfect fit.
+Then you will need to import the stylesheet file from your own stylesheet, and override the default variables with your own.
-A word on height: The height you determine by the height property, is of the emoji-list only, the search and categories panel are added to the height you specify.
+```scss
+// style.scss
+$size_emoji: 10px;
+$width_picker: 300px;
+$height_picker: 350px;
+$bg_picker: #f1f1f1;
+@import './node_modules/emoji-picker-react/dist/universal/style.scss'; // relative path to your node modules
-
+```
+
+
## Using custom category titles
If you want to modify the currently existing category names, simply pass a mapping object with the names you would like to replace, for example:
@@ -69,7 +91,7 @@ Here is the list of all category names, accepted by customCategoryNames:
## Disabling the diversity picker
-
+
The per emoji diversity gets triggered on hover or long click by default. By passing the prop `disableDiversityPicker` to the picker, it will be disabled and not get triggered.
@@ -77,14 +99,6 @@ The per emoji diversity gets triggered on hover or long click by default. By pas
```
-## Moving the categories panel around
-
-```js
- // default. no need to pass nav="top"
-
-
-```
-
## Preloading all images
By default, each emoji category is loaded when first viewing it to reduce initial load time and improve perceived performance. This can sometimes take a while. In some cases you would want to load all images at once, for example, when lazy loading the picker in the background regardless of user interaction.
@@ -140,7 +154,7 @@ and then, in your onEmojiClick callback:
jsemoji.replace_colons(`:${emojiName}:`);
```
-
+
# Image hosting
## CDN
@@ -164,14 +178,14 @@ The picker will internally construct the image urls to appear like this:
`http://example.com/emojis/64/1f448-1f3fd.png`
(`1f448-1f3fd.png` is an emoji filename + extension)
-
+
# Cool stuff
## Per Emoji diversity picker
Long clicking on diversity (skin-tone) enabled Emojies (mostly the hand Emojis), will open a list of all skin tones for this Emoji.
-
+
# Attributions
You can use this **picker**, free of charge, no attribution is needed. The emojis have their own license.
diff --git a/dist/index.js b/dist/index.js
index 664536d3..5ff9ea89 100644
--- a/dist/index.js
+++ b/dist/index.js
@@ -1,6 +1,7 @@
-!function(e,n){"object"==typeof exports&&"object"==typeof module?module.exports=n(require("react"),require("throttle-debounce")):"function"==typeof define&&define.amd?define(["react","throttle-debounce"],n):"object"==typeof exports?exports.EmojiPicker=n(require("react"),require("throttle-debounce")):e.EmojiPicker=n(e.react,e["throttle-debounce"])}("undefined"!=typeof self?self:this,function(e,n){return function(e){function n(f){if(o[f])return o[f].exports;var t=o[f]={i:f,l:!1,exports:{}};return e[f].call(t.exports,t,t.exports,n),t.l=!0,t.exports}var o={};return n.m=e,n.c=o,n.d=function(e,o,f){n.o(e,o)||Object.defineProperty(e,o,{configurable:!1,enumerable:!0,get:f})},n.n=function(e){var o=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(o,"a",o),o},n.o=function(e,n){return Object.prototype.hasOwnProperty.call(e,n)},n.p="",n(n.s=64)}([function(e,n){var o=e.exports={version:"2.5.1"};"number"==typeof __e&&(__e=o)},function(e,n,o){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.skinTones=n.keywords=n.modifiers=n.categories=n.emojis=void 0;var f=o(115);n.emojis=f.emojis,n.categories=f.categories,n.modifiers=f.modifiers,n.keywords=f.keywords,n.skinTones=f.skinTones},function(e,n,o){"use strict";function f(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(n,"__esModule",{value:!0}),n.KEYWORDS_SINGLE=n.ALL_KEYWORDS=n.DEFAULT_IMAGE_RESOLUTION=n.DEFAULT_CDN_PATH=n.FILTER_UPDATE_DEBOUNCE=n.HIDE_SCROLL_DEBOUNCE=n.OPEN_DIVERSITIES_TIMEOUT=n.MIN_SCROLLBAR_HEIGHT_PADDED=n.EMOJI_PADDING=n.EMOJI_BG_SIZE=n.PICKER_HEIGHT=n.PICKER_WIDTH=n.HEADER_HEIGHT=void 0;var t=o(15),r=f(t),c=o(1),i=o(133),a=f(i);n.HEADER_HEIGHT=25,n.PICKER_WIDTH=240,n.PICKER_HEIGHT=240,n.EMOJI_BG_SIZE=20,n.EMOJI_PADDING=7,n.MIN_SCROLLBAR_HEIGHT_PADDED=15,n.OPEN_DIVERSITIES_TIMEOUT=1e3,n.HIDE_SCROLL_DEBOUNCE=550,n.FILTER_UPDATE_DEBOUNCE=200,n.DEFAULT_CDN_PATH="https://cdn.jsdelivr.net/emojione/assets/3.0/png",n.DEFAULT_IMAGE_RESOLUTION="32",n.ALL_KEYWORDS=(0,r.default)(c.keywords),n.KEYWORDS_SINGLE=a.default},function(n,o){n.exports=e},function(e,n,o){if("production"!==process.env.NODE_ENV){var f="function"==typeof Symbol&&Symbol.for&&Symbol.for("react.element")||60103,t=function(e){return"object"==typeof e&&null!==e&&e.$$typeof===f};e.exports=o(110)(t,!0)}else e.exports=o(113)()},function(e,n){function o(e,n){var o=e[1]||"",t=e[3];if(!t)return o;if(n&&"function"==typeof btoa){var r=f(t);return[o].concat(t.sources.map(function(e){return"/*# sourceURL="+t.sourceRoot+e+" */"})).concat([r]).join("\n")}return[o].join("\n")}function f(e){return"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(e))))+" */"}e.exports=function(e){var n=[];return n.toString=function(){return this.map(function(n){var f=o(n,e);return n[2]?"@media "+n[2]+"{"+f+"}":f}).join("")},n.i=function(e,o){"string"==typeof e&&(e=[[null,e,""]]);for(var f={},t=0;t=0&&v.splice(n,1)}function i(e){var n=document.createElement("style");return e.attrs.type="text/css",u(n,e.attrs),r(e,n),n}function a(e){var n=document.createElement("link");return e.attrs.type="text/css",e.attrs.rel="stylesheet",u(n,e.attrs),r(e,n),n}function u(e,n){Object.keys(n).forEach(function(o){e.setAttribute(o,n[o])})}function s(e,n){var o,f,t,r;if(n.transform&&e.css){if(!(r=n.transform(e.css)))return function(){};e.css=r}if(n.singleton){var u=_++;o=b||(b=i(n)),f=l.bind(null,o,u,!1),t=l.bind(null,o,u,!0)}else e.sourceMap&&"function"==typeof URL&&"function"==typeof URL.createObjectURL&&"function"==typeof URL.revokeObjectURL&&"function"==typeof Blob&&"function"==typeof btoa?(o=a(n),f=p.bind(null,o,n),t=function(){c(o),o.href&&URL.revokeObjectURL(o.href)}):(o=i(n),f=d.bind(null,o),t=function(){c(o)});return f(e),function(n){if(n){if(n.css===e.css&&n.media===e.media&&n.sourceMap===e.sourceMap)return;f(e=n)}else t()}}function l(e,n,o,f){var t=o?"":f.css;if(e.styleSheet)e.styleSheet.cssText=k(n,t);else{var r=document.createTextNode(t),c=e.childNodes;c[n]&&e.removeChild(c[n]),c.length?e.insertBefore(r,c[n]):e.appendChild(r)}}function d(e,n){var o=n.css,f=n.media;if(f&&e.setAttribute("media",f),e.styleSheet)e.styleSheet.cssText=o;else{for(;e.firstChild;)e.removeChild(e.firstChild);e.appendChild(document.createTextNode(o))}}function p(e,n,o){var f=o.css,t=o.sourceMap,r=void 0===n.convertToAbsoluteUrls&&t;(n.convertToAbsoluteUrls||r)&&(f=y(f)),t&&(f+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(t))))+" */");var c=new Blob([f],{type:"text/css"}),i=e.href;e.href=URL.createObjectURL(c),i&&URL.revokeObjectURL(i)}var h={},g=function(e){var n;return function(){return void 0===n&&(n=e.apply(this,arguments)),n}}(function(){return window&&document&&document.all&&!window.atob}),m=function(e){var n={};return function(o){if(void 0===n[o]){var f=e.call(this,o);if(f instanceof window.HTMLIFrameElement)try{f=f.contentDocument.head}catch(e){f=null}n[o]=f}return n[o]}}(function(e){return document.querySelector(e)}),b=null,_=0,v=[],y=o(118);e.exports=function(e,n){if("undefined"!=typeof DEBUG&&DEBUG&&"object"!=typeof document)throw new Error("The style-loader cannot be used in a non-browser environment");n=n||{},n.attrs="object"==typeof n.attrs?n.attrs:{},n.singleton||"boolean"==typeof n.singleton||(n.singleton=g()),n.insertInto||(n.insertInto="head"),n.insertAt||(n.insertAt="bottom");var o=t(e,n);return f(o,n),function(e){for(var r=[],c=0;c0?f:o)(e)}},function(e,n,o){var f=o(34)("keys"),t=o(26);e.exports=function(e){return f[e]||(f[e]=t(e))}},function(e,n,o){var f=o(8),t=f["__core-js_shared__"]||(f["__core-js_shared__"]={});e.exports=function(e){return t[e]||(t[e]={})}},function(e,n){e.exports="constructor,hasOwnProperty,isPrototypeOf,propertyIsEnumerable,toLocaleString,toString,valueOf".split(",")},function(e,n){n.f=Object.getOwnPropertySymbols},function(e,n){e.exports=!0},function(e,n){e.exports={}},function(e,n,o){var f=o(17),t=o(87),r=o(35),c=o(33)("IE_PROTO"),i=function(){},a=function(){var e,n=o(49)("iframe"),f=r.length;for(n.style.display="none",o(88).appendChild(n),n.src="javascript:",e=n.contentWindow.document,e.open(),e.write("
+