Added new chipTheme prop:

1. as another ‘story’
2. README
3. as another example in ‘site’

Author: SerjSmor

README.md

@@ -54,6 +54,7 @@ class YourComponent extends Component {
 |`onChange`|Function|✓|A function called when the value of chips changes, passes the chips value as an argument.|
 |`placeholder`|String||The placeholder to populate the input with|
 |`theme`|Object||A [react-themeable](https://github.com/markdalgleish/react-themeable) theme|
+|`chipTheme`|Object|| A [react-themeable](https://github.com/markdalgleish/react-themeable) theme that will override the default chip theme, 
 |`suggestions`|Array||Data to fill the autocomplete list with|
 |`fetchSuggestions`|Function|| Delegate expecting to recive autocomplete suggestions (callback or promise)|
 |`fetchSuggestionsThrushold`|Number|| Maximum calls to fetchSuggestions per-second |

site/src/Root.js

@@ -3,13 +3,16 @@ import React from 'react';
 import BasicExample from './basic';
 import CustomExample from './custom';
 import AsyncExample from './async';
+import CustomChipThemeExample from './customChipTheme';
 
 const Root = () => (
   <div>
     <h1>Basic</h1>
     <BasicExample />
     <h1>Custom</h1>
     <CustomExample />
+    <h1>Custom Chip Theme</h1>
+    <CustomChipThemeExample />
     <h1>Async</h1>
     <AsyncExample />
   </div>

site/src/customChipTheme.js

@@ -0,0 +1,44 @@
+import React, { Component } from 'react';
+import Chips, { Chip } from '../../src'
+
+const data = [
+  'JavaScript',
+  'Ruby',
+  'Python',
+  'Java',
+  'Swift',
+  'C++',
+  'C',
+  'Objective C',
+  'Go'
+];
+
+class CustomChipThemeExample extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      value: []
+    }
+  }
+
+  onChange = value => {
+    this.setState({ value });
+  }
+
+  render() {
+    return (
+      <Chips
+        value={this.state.value}
+        onChange={this.onChange}
+        chipTheme={{ chip: { margin: "3px", padding: 5, background: 'red' } }}
+        createChipKeys={['a']}
+        placeholder="Type a Programming Language"
+        suggestions={data}
+        shouldRenderSuggestions={value => value.length >= 0}
+        fromSuggestionsOnly={false} />
+    );
+  }
+}
+
+export default CustomChipThemeExample;

stories/index.js

@@ -50,6 +50,13 @@ storiesOf('Chips', module)
       highlightFirstSuggestion={true}
     />
   ))
+  .add('Custom Chip Theme', () => (
+    <Chips
+        chipTheme={{ chip: { margin: "3px", padding: 5, background: 'red' } }}
+        suggestions={suggestions}
+        shouldRenderSuggestions={value => value.length >= 0}
+        fromSuggestionsOnly={false} />
+  ))
   .add('Custom Chip', () => (
     <Chips
       placeholder="Type a Programming Language"