tshaddix
diff --git a/‎example/bundle.js‎
Lines changed: 40281 additions & 0 deletions b/‎example/bundle.js‎
Lines changed: 40281 additions & 0 deletions
diff --git a/‎example/bundle.js.map‎
Lines changed: 1 addition & 0 deletions b/‎example/bundle.js.map‎
Lines changed: 1 addition & 0 deletions
diff --git a/‎example/example.html‎
Lines changed: 13 additions & 0 deletions b/‎example/example.html‎
Lines changed: 13 additions & 0 deletions
diff --git a/‎example/example.tsx‎
Lines changed: 56 additions & 0 deletions b/‎example/example.tsx‎
Lines changed: 56 additions & 0 deletions
diff --git a/‎example/webpack.config.js‎
Lines changed: 25 additions & 0 deletions b/‎example/webpack.config.js‎
Lines changed: 25 additions & 0 deletions
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="UTF-8" />
+        <title>React Giphy Selector - Example</title>
+    </head>
+    <body>
+        <div id="example"></div>
+
+        <!-- Main -->
+        <script src="./bundle.js"></script>
+    </body>
+</html>
@@ -0,0 +1,56 @@
+import {Selector} from '../lib';
+import * as Lib from '../lib';
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+
+// feel free to change these :)
+const suggestions = ["stop it", "nice one", "look up", "no", "bad"];
+
+interface IExampleProps {
+  suggestions: string[];
+}
+
+interface IExampleState {
+  apiKey: string;
+}
+
+class ExampleApp extends React.Component<IExampleProps, IExampleState> {
+  state: IExampleState;
+  
+  constructor (props: IExampleProps) {
+    super(props);
+    
+    this.state = {
+      apiKey: ""
+    };
+    
+    this.onKeyChange = this.onKeyChange.bind(this);
+  }
+  
+  public onKeyChange (event: any): void {
+    this.setState({apiKey: event.target.value});
+  }
+  
+  public render (): JSX.Element {
+    const {apiKey} = this.state;
+    const {suggestions} = this.props;
+    
+    // todo: This pattern will not work as the API key needs to be set before selector is constructed
+    
+    return (
+      <div>
+        <div>
+          <input type="text" placeholder="Enter your Giphy API Key" value={apiKey} onChange={this.onKeyChange}/>
+        </div>
+        <div>
+          <Selector apiKey={apiKey} suggestions={suggestions}/>
+        </div>
+      </div>
+    );
+  }
+}
+
+ReactDOM.render(
+  <ExampleApp suggestions={suggestions}/>,
+  document.getElementById('example')
+);
@@ -0,0 +1,25 @@
+module.exports = {
+  entry: "./example/example.tsx",
+  output: {
+    filename: "bundle.js",
+    path: __dirname
+  },
+
+  // Enable sourcemaps for debugging webpack's output.
+  devtool: "source-map",
+
+  resolve: {
+    // Add '.ts' and '.tsx' as resolvable extensions.
+    extensions: [".ts", ".tsx", ".js", ".json"]
+  },
+
+  module: {
+    rules: [
+      // All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'.
+      { test: /\.tsx?$/, loader: "awesome-typescript-loader" },
+
+      // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
+      { enforce: "pre", test: /\.js$/, loader: "source-map-loader" }
+    ]
+  }
+};