Add nonce to AutoSizer style for Content Security Policy

README.md

@@ -110,6 +110,20 @@ var settings = {
 <EmojiPicker categories={categories} emojione={settings} />
 ```
 
+## Content Security Policy
+
+The picker uses _react-virtualized_, which creates an inlined style. Give the
+picker a nonce and set `Content-Security-Policy` field in HTTP header
+accordingly.
+
+```
+<EmojiPicker nonce={NONCE_GENERATED_WHEN_TRANSMITTING} />
+```
+
+```
+Content-Security-Policy: style-src: 'self' 'nonce-NONCE_GENERATED_WHEN_TRANSMITTING'
+```
+
 
 ## Development
 

src/categories.jsx

@@ -144,7 +144,7 @@ export default class Categories extends Component {
     const rowCount = this.props.rows.length;
 
     return (
-      <AutoSizer>
+      <AutoSizer nonce={this.props.nonce}>
         {({ height, width }) => (
           <List
             height={height}

src/picker.jsx

@@ -94,6 +94,7 @@ export default class Picker extends Component {
     return (
       <div className="emoji-categories-wrapper">
         <Categories
+          nonce={this.props.nonce}
           ref={this._setCategoriesRef}
           rows={rows}
           modifier={this.state.modifier}