Commit 12ae77e

committed

add example with library

1 parent 33e54ca commit 12ae77eCopy full SHA for 12ae77e

File tree

+106

-2

lines changed

+106

-2

lines changed

Lines changed: 45 additions & 0 deletions

Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

Lines changed: 2 additions & 1 deletion

Lines changed: 2 additions & 1 deletion

Original file line number	Diff line number	Diff line change
`@@ -4,7 +4,8 @@ import ReactDOM from 'react-dom';`
`4`	`4`	`// import App from './useState-example';`
`5`	`5`	`// import App from './useEffect-example';`
`6`	`6`	`// import App from './customHook-example';`
`7`		`-import App from './useDataApiHook-example';`
	`7`	`+// import App from './useDataApiHook-example';`
	`8`	`+import App from './useDataApiHook-external-example';`
`8`	`9`
`9`	`10`	`import * as serviceWorker from './serviceWorker';`
`10`	`11`

Lines changed: 48 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,48 @@`
	`1`	`+import React, { Fragment, useState } from 'react';`
	`2`	`+`
	`3`	`+import useDataApi from 'use-data-api';`
	`4`	`+`
	`5`	`+function App() {`
	`6`	`+ const [query, setQuery] = useState('redux');`
	`7`	`+ const [{ data, isLoading, isError }, doFetch] = useDataApi(`
	`8`	`+ 'http://hn.algolia.com/api/v1/search?query=redux',`
	`9`	`+ { hits: [] },`
	`10`	`+ );`
	`11`	`+`
	`12`	`+ return (`
	`13`	`+ <Fragment>`
	`14`	`+ <form`
	`15`	`+ onSubmit={event => {`
	`16`	`+ doFetch(`
	`17`	+ `http://hn.algolia.com/api/v1/search?query=${query}`,
	`18`	`+ );`
	`19`	`+`
	`20`	`+ event.preventDefault();`
	`21`	`+ }}`
	`22`	`+ >`
	`23`	`+ <input`
	`24`	`+ type="text"`
	`25`	`+ value={query}`
	`26`	`+ onChange={event => setQuery(event.target.value)}`
	`27`	`+ />`
	`28`	`+ <button type="submit">Search</button>`
	`29`	`+ </form>`
	`30`	`+`
	`31`	`+ {isError && <div>Something went wrong ...</div>}`
	`32`	`+`
	`33`	`+ {isLoading ? (`
	`34`	`+ <div>Loading ...</div>`
	`35`	`+ ) : (`
	`36`	`+ <ul>`
	`37`	`+ {data.hits.map(item => (`
	`38`	`+ <li key={item.objectID}>`
	`39`	`+ <a href={item.url}>{item.title}</a>`
	`40`	`+ </li>`
	`41`	`+ ))}`
	`42`	`+ </ul>`
	`43`	`+ )}`
	`44`	`+ </Fragment>`
	`45`	`+ );`
	`46`	`+}`
	`47`	`+`
	`48`	`+export default App;`

Lines changed: 9 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,9 @@`
	`1`	`+import React from 'react';`
	`2`	`+import ReactDOM from 'react-dom';`
	`3`	`+import App from './';`
	`4`	`+`
	`5`	`+it('renders without crashing', () => {`
	`6`	`+ const div = document.createElement('div');`
	`7`	`+ ReactDOM.render(<App />, div);`
	`8`	`+ ReactDOM.unmountComponentAtNode(div);`
	`9`	`+});`

Comments

(0)