add example with library

Author: rwieruch

package-lock.json

@@ -6,7 +6,8 @@
     "axios": "^0.18.0",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
-    "react-scripts": "^3.0.1"
+    "react-scripts": "^3.0.1",
+    "use-data-api": "^1.0.0"
   },
   "scripts": {
     "start": "react-scripts start",

package.json

@@ -4,7 +4,8 @@ import ReactDOM from 'react-dom';
 // import App from './useState-example';
 // import App from './useEffect-example';
 // import App from './customHook-example';
-import App from './useDataApiHook-example';
+// import App from './useDataApiHook-example';
+import App from './useDataApiHook-external-example';
 
 import * as serviceWorker from './serviceWorker';
 

src/index.js

@@ -0,0 +1,48 @@
+import React, { Fragment, useState } from 'react';
+
+import useDataApi from 'use-data-api';
+
+function App() {
+  const [query, setQuery] = useState('redux');
+  const [{ data, isLoading, isError }, doFetch] = useDataApi(
+    'http://hn.algolia.com/api/v1/search?query=redux',
+    { hits: [] },
+  );
+
+  return (
+    <Fragment>
+      <form
+        onSubmit={event => {
+          doFetch(
+            `http://hn.algolia.com/api/v1/search?query=${query}`,
+          );
+
+          event.preventDefault();
+        }}
+      >
+        <input
+          type="text"
+          value={query}
+          onChange={event => setQuery(event.target.value)}
+        />
+        <button type="submit">Search</button>
+      </form>
+
+      {isError && <div>Something went wrong ...</div>}
+
+      {isLoading ? (
+        <div>Loading ...</div>
+      ) : (
+        <ul>
+          {data.hits.map(item => (
+            <li key={item.objectID}>
+              <a href={item.url}>{item.title}</a>
+            </li>
+          ))}
+        </ul>
+      )}
+    </Fragment>
+  );
+}
+
+export default App;

src/useDataApiHook-external-example/index.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './';
+
+it('renders without crashing', () => {
+  const div = document.createElement('div');
+  ReactDOM.render(<App />, div);
+  ReactDOM.unmountComponentAtNode(div);
+});