From 4f9faf40783f944bbc5f38567472865e95ce0b13 Mon Sep 17 00:00:00 2001
From: Ian J Miller <ianmiller347@gmail.com>
Date: Tue, 6 Mar 2018 18:49:25 -0600
Subject: [PATCH] add search bar example to readme

---
 README.md | 51 +++++++++++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 49 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 1e4cb9e..0629303 100644
--- a/README.md
+++ b/README.md
@@ -13,7 +13,6 @@ import FeatherIcon from 'feather-icons-react';
 <FeatherIcon icon="close" />
 ```
 
-
 **Setting a size:**
 
 Size can be passed as either string or number.
@@ -22,8 +21,56 @@ e.g.: `<FeatherIcon icon="copy" size="24" />` or `<... size={24} />`
 
 Sizes can always be easily overridden by CSS.
 
+#### Dynamically change icons
+**Search Bar Container example:**
+```
+export default const SearchBar = ({ currentIcon, onChange, onClick }) => {
+  return (
+    <div className='search-bar-container'>
+      <input type='text' onChange={onChange} />
+      <button className='search-bar__button' onClick={onClick}>
+        <FontIcon icon={currentIcon} className='button--icon' />
+      </button>
+    </div>
+  );
+};
 
-The icons are all square.
+class SearchBarContainer extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      showingSuggestions: false
+    };
+  }
+
+  toggleSuggestions = () => {
+    this.setState({
+      showingSuggestions: !this.state.showingSuggestions
+    });
+  }
+
+  performSearch = (e) => {
+    this.props.dispatch(searchFromInput(e.target.value));
+  }
+
+  render() {
+    const { showingSuggestions } = this.state;
+    const { suggestionsList } = this.props;
+    const currentClass = (showingSuggestions) ? 'search' : 'x ';
+
+    return (
+      <SearchBar
+        onChange={this.toggleSuggestions}
+        currentIcon={currentClass}
+        onClick={this.performSearch} />
+    );
+  }
+}
+```
+
+
+The icons are all square, based on a 24x24 grid.
 
 
 The full list of icon names can be referenced at: [feathericons.com](https://feathericons.com/)