diff --git a/README.md b/README.md
index 58b5ac6..6b34f76 100644
--- a/README.md
+++ b/README.md
@@ -6,6 +6,10 @@
Brought to you by the Missive team
+## Installation
+
+`npm install --save emoji-mart`
+
## Components
### Picker
```jsx
diff --git a/css/emoji-mart.css b/css/emoji-mart.css
index dd4960d..3e4532b 100644
--- a/css/emoji-mart.css
+++ b/css/emoji-mart.css
@@ -67,6 +67,7 @@
.emoji-mart-anchors svg {
fill: currentColor;
+ max-height: 18px;
}
.emoji-mart-scroll {
@@ -163,7 +164,7 @@
.emoji-mart-preview-data {
left: 68px; right: 12px;
- word-break: break-word;
+ word-break: break-all;
}
.emoji-mart-preview-skins {
@@ -231,7 +232,7 @@
transition-timing-function: ease-out;
}
-.emoji-mart-skin-swatch:nth-child(1) { transition-delay: 0 }
+.emoji-mart-skin-swatch:nth-child(1) { transition-delay: 0s }
.emoji-mart-skin-swatch:nth-child(2) { transition-delay: .03s }
.emoji-mart-skin-swatch:nth-child(3) { transition-delay: .06s }
.emoji-mart-skin-swatch:nth-child(4) { transition-delay: .09s }
diff --git a/package.json b/package.json
index 7c69bbb..5688dca 100644
--- a/package.json
+++ b/package.json
@@ -39,6 +39,7 @@
"karma-jasmine": "^1.1.0",
"karma-webpack": "^2.0.2",
"mkdirp": "0.5.1",
+ "prop-types": "^15.5.8",
"react": "15.2.0",
"react-addons-test-utils": "15.2.0",
"react-dom": "15.2.0",
diff --git a/src/components/anchors.js b/src/components/anchors.js
index 704f1cc..c8708ae 100644
--- a/src/components/anchors.js
+++ b/src/components/anchors.js
@@ -1,4 +1,5 @@
import React from 'react'
+import PropTypes from 'prop-types'
import InlineSVG from 'svg-inline-react'
import * as SVGs from '../svgs'
@@ -51,8 +52,8 @@ export default class Anchors extends React.Component {
}
Anchors.propTypes = {
- categories: React.PropTypes.array,
- onAnchorClick: React.PropTypes.func,
+ categories: PropTypes.array,
+ onAnchorClick: PropTypes.func,
}
Anchors.defaultProps = {
diff --git a/src/components/category.js b/src/components/category.js
index bed2259..8def645 100644
--- a/src/components/category.js
+++ b/src/components/category.js
@@ -1,4 +1,5 @@
import React from 'react'
+import PropTypes from 'prop-types'
import frequently from '../utils/frequently'
import { Emoji } from '.'
@@ -154,12 +155,12 @@ export default class Category extends React.Component {
}
Category.propTypes = {
- emojis: React.PropTypes.array,
- hasStickyPosition: React.PropTypes.bool,
- name: React.PropTypes.string.isRequired,
- native: React.PropTypes.bool.isRequired,
- perLine: React.PropTypes.number.isRequired,
- emojiProps: React.PropTypes.object.isRequired,
+ emojis: PropTypes.array,
+ hasStickyPosition: PropTypes.bool,
+ name: PropTypes.string.isRequired,
+ native: PropTypes.bool.isRequired,
+ perLine: PropTypes.number.isRequired,
+ emojiProps: PropTypes.object.isRequired,
}
Category.defaultProps = {
diff --git a/src/components/emoji.js b/src/components/emoji.js
index 189d556..58b69fc 100644
--- a/src/components/emoji.js
+++ b/src/components/emoji.js
@@ -1,4 +1,5 @@
import React from 'react'
+import PropTypes from 'prop-types'
import data from '../../data'
import { getData, getSanitizedData, unifiedToNative } from '../utils'
@@ -104,19 +105,19 @@ export default class Emoji extends React.Component {
}
Emoji.propTypes = {
- onOver: React.PropTypes.func,
- onLeave: React.PropTypes.func,
- onClick: React.PropTypes.func,
- backgroundImageFn: React.PropTypes.func,
- native: React.PropTypes.bool,
- forceSize: React.PropTypes.bool,
- skin: React.PropTypes.oneOf([1, 2, 3, 4, 5, 6]),
- sheetSize: React.PropTypes.oneOf([16, 20, 32, 64]),
- set: React.PropTypes.oneOf(['apple', 'google', 'twitter', 'emojione']),
- size: React.PropTypes.number.isRequired,
- emoji: React.PropTypes.oneOfType([
- React.PropTypes.string,
- React.PropTypes.object,
+ onOver: PropTypes.func,
+ onLeave: PropTypes.func,
+ onClick: PropTypes.func,
+ backgroundImageFn: PropTypes.func,
+ native: PropTypes.bool,
+ forceSize: PropTypes.bool,
+ skin: PropTypes.oneOf([1, 2, 3, 4, 5, 6]),
+ sheetSize: PropTypes.oneOf([16, 20, 32, 64]),
+ set: PropTypes.oneOf(['apple', 'google', 'twitter', 'emojione']),
+ size: PropTypes.number.isRequired,
+ emoji: PropTypes.oneOfType([
+ PropTypes.string,
+ PropTypes.object,
]).isRequired,
}
diff --git a/src/components/picker.js b/src/components/picker.js
index f6f03a3..df50e89 100644
--- a/src/components/picker.js
+++ b/src/components/picker.js
@@ -1,6 +1,7 @@
import '../vendor/raf-polyfill'
import React from 'react'
+import PropTypes from 'prop-types'
import data from '../../data'
import store from '../utils/store'
@@ -368,23 +369,23 @@ export default class Picker extends React.Component {
}
Picker.propTypes = {
- onClick: React.PropTypes.func,
- perLine: React.PropTypes.number,
- emojiSize: React.PropTypes.number,
- i18n: React.PropTypes.object,
- style: React.PropTypes.object,
- title: React.PropTypes.string,
- emoji: React.PropTypes.string,
- color: React.PropTypes.string,
+ onClick: PropTypes.func,
+ perLine: PropTypes.number,
+ emojiSize: PropTypes.number,
+ i18n: PropTypes.object,
+ style: PropTypes.object,
+ title: PropTypes.string,
+ emoji: PropTypes.string,
+ color: PropTypes.string,
set: Emoji.propTypes.set,
skin: Emoji.propTypes.skin,
- native: React.PropTypes.bool,
+ native: PropTypes.bool,
backgroundImageFn: Emoji.propTypes.backgroundImageFn,
sheetSize: Emoji.propTypes.sheetSize,
- emojisToShowFilter: React.PropTypes.func,
- include: React.PropTypes.arrayOf(React.PropTypes.string),
- exclude: React.PropTypes.arrayOf(React.PropTypes.string),
- autoFocus: React.PropTypes.bool,
+ emojisToShowFilter: PropTypes.func,
+ include: PropTypes.arrayOf(PropTypes.string),
+ exclude: PropTypes.arrayOf(PropTypes.string),
+ autoFocus: PropTypes.bool,
}
Picker.defaultProps = {
diff --git a/src/components/preview.js b/src/components/preview.js
index 676b371..a5a4e08 100644
--- a/src/components/preview.js
+++ b/src/components/preview.js
@@ -1,4 +1,5 @@
import React from 'react'
+import PropTypes from 'prop-types'
import { Emoji, Skins } from '.'
import { getData } from '../utils'
@@ -75,8 +76,8 @@ export default class Preview extends React.Component {
}
Preview.propTypes = {
- title: React.PropTypes.string.isRequired,
- emoji: React.PropTypes.string.isRequired,
- emojiProps: React.PropTypes.object.isRequired,
- skinsProps: React.PropTypes.object.isRequired,
+ title: PropTypes.string.isRequired,
+ emoji: PropTypes.string.isRequired,
+ emojiProps: PropTypes.object.isRequired,
+ skinsProps: PropTypes.object.isRequired,
}
diff --git a/src/components/search.js b/src/components/search.js
index c625442..b2100bc 100644
--- a/src/components/search.js
+++ b/src/components/search.js
@@ -1,4 +1,5 @@
import React from 'react'
+import PropTypes from 'prop-types'
import emojiIndex from '../utils/emoji-index'
export default class Search extends React.Component {
@@ -33,10 +34,10 @@ export default class Search extends React.Component {
}
Search.propTypes = {
- onSearch: React.PropTypes.func,
- maxResults: React.PropTypes.number,
- emojisToShowFilter: React.PropTypes.func,
- autoFocus: React.PropTypes.bool,
+ onSearch: PropTypes.func,
+ maxResults: PropTypes.number,
+ emojisToShowFilter: PropTypes.func,
+ autoFocus: PropTypes.bool,
}
Search.defaultProps = {
diff --git a/src/components/skins.js b/src/components/skins.js
index 6604e23..d1261f3 100644
--- a/src/components/skins.js
+++ b/src/components/skins.js
@@ -1,4 +1,5 @@
import React from 'react'
+import PropTypes from 'prop-types'
export default class Skins extends React.Component {
constructor(props) {
@@ -43,8 +44,8 @@ export default class Skins extends React.Component {
}
Skins.propTypes = {
- onChange: React.PropTypes.func,
- skin: React.PropTypes.number.isRequired,
+ onChange: PropTypes.func,
+ skin: PropTypes.number.isRequired,
}
Skins.defaultProps = {