uf - npm Package Compare versions
Comparing version 0.1.0 to 0.1.1
| { | ||
| "name": "uf", | ||
| "version": "0.1.0", | ||
| "version": "0.1.1", | ||
| "homepage": "https://usefet.ch", | ||
@@ -5,0 +5,0 @@ "main": "dist/index.js", |
123
README.md
@@ -64,3 +64,3 @@ [![use-http logo][3]][5] | ||
| <div align="center"> | ||
| <pre>npm i <a href="https://use-http.com">use-http</a></pre> | ||
| <pre>npm i <a href="https://usefet.ch">uf</a></pre> | ||
| </div> | ||
@@ -92,3 +92,3 @@ | ||
| - useFetch - managed state, request, response, etc. [](https://codesandbox.io/s/usefetch-request-response-managed-state-ruyi3?file=/src/index.js) [](https://www.youtube.com/watch?v=_-GujYZFCKI&list=PLZIwrWkE9rCdUybd8t3tY-mUMvXkCdenW&index=6) | ||
| - useFetch - lazy, non-lazy, both [](https://codesandbox.io/s/usefetch-request-response-managed-state-ruyi3?file=/src/index.js) [](https://www.youtube.com/watch?v=_-GujYZFCKI&list=PLZIwrWkE9rCdUybd8t3tY-mUMvXkCdenW&index=6) | ||
| - useFetch - request/response interceptors [](https://codesandbox.io/s/usefetch-provider-requestresponse-interceptors-s1lex) [](https://www.youtube.com/watch?v=3HauoWh0Jts&list=PLZIwrWkE9rCdUybd8t3tY-mUMvXkCdenW&index=8) | ||
@@ -110,3 +110,3 @@ - useFetch - retries, retryOn, retryDelay [](https://codesandbox.io/s/usefetch-retryon-retrydelay-s74q9) [](https://www.youtube.com/watch?v=grE3AX-Q9ss&list=PLZIwrWkE9rCdUybd8t3tY-mUMvXkCdenW&index=9) | ||
| ```js | ||
| import useFetch from 'use-http' | ||
| import useFetch from 'uf' | ||
@@ -149,3 +149,3 @@ function Todos() { | ||
| ```js | ||
| import useFetch from 'use-http' | ||
| import useFetch from 'uf' | ||
@@ -175,3 +175,3 @@ function Todos() { | ||
| ```js | ||
| import useFetch, { Provider } from 'use-http' | ||
| import useFetch, { Provider } from 'uf' | ||
@@ -207,3 +207,3 @@ function Todos() { | ||
| ```js | ||
| import useFetch, { Provider } from 'use-http' | ||
| import useFetch, { Provider } from 'uf' | ||
@@ -271,3 +271,3 @@ function Todos() { | ||
| <details><summary><b>Pagination + <code>Provider</code></b></summary> | ||
| <details><summary><b>Pagination/Infinite Scroll + <code>Provider</code></b></summary> | ||
@@ -277,20 +277,25 @@ The `onNewData` will take the current data, and the newly fetched data, and allow you to merge the two however you choose. In the example below, we are appending the new todos to the end of the current todos. | ||
| ```jsx | ||
| import useFetch, { Provider } from 'use-http' | ||
| import useFetch, { Provider } from 'uf' | ||
| const Todos = () => { | ||
| function Todos() { | ||
| const perPage = 15 | ||
| const [page, setPage] = useState(1) | ||
| // aka: load initial todos on mount into `data`. Re-runs when url changes | ||
| const [todos = [],, todosAPI] = useFetch(`/todos?page=${page}&perPage=${perPage}`, { | ||
| // appends newly fetched todos | ||
| onNewData: (currTodos = [], newTodos) => [...currTodos, ...newTodos], | ||
| perPage, // stops making more requests if last todos fetched < 15. | ||
| }) // `perPage` REQUIRED if you want loadingMore to work properly | ||
| const { data = [], loading } = useFetch(`/todos?page=${page}&amountPerPage=15`, { | ||
| onNewData: (currTodos, newTodos) => [...currTodos, ...newTodos], // appends newly fetched todos | ||
| perPage: 15, // stops making more requests if last todos fetched < 15 | ||
| }, [page]) // runs onMount AND whenever the `page` updates (onUpdate) | ||
| return ( | ||
| <ul> | ||
| {data.map(todo => <li key={todo.id}>{todo.title}</li>} | ||
| {loading && 'Loading...'} | ||
| {!loading && ( | ||
| <button onClick={() => setPage(page + 1)}>Load More Todos</button> | ||
| <> | ||
| {todosAPI.error && 'Error!'} | ||
| {todos.map(todo => ( | ||
| <div key={todo.id}>{todo.title}</div> | ||
| )} | ||
| </ul> | ||
| {!todosAPI.loading && 'Loading Initial Todos...'} | ||
| <button onClick={() => setPage(page + 1)}> | ||
| {todoAPI.loadingMore ? 'Loading More...' : 'Load More'} | ||
| </button> | ||
| </> | ||
| ) | ||
@@ -306,2 +311,37 @@ } | ||
| Or if you want more control you can do | ||
| ```js | ||
| function Todos() { | ||
| const perPage = 15 | ||
| const page = useRef(1) | ||
| // aka: load initial todos on mount into `todos` | ||
| const [todos = [], setTodos, todosAPI] = useFetch('/todos') | ||
| const [loadingMore, setLoadingMore] = useState(false) | ||
| async function loadMore() { | ||
| const hasMore = todos.length % perPage === 0 | ||
| if (!hasMore) return | ||
| setLoadingMore(true) | ||
| const { data: moreTodos, ok } = await todosAPI.get(`?page=${page.current++}&perPage=${perPage}`) | ||
| if (ok) { | ||
| // setTodos would use the cache key `/todos` and save this into cache | ||
| setTodos(todos => [...todos, ...moreTodos]) | ||
| } | ||
| setLoadingMore(false) | ||
| } | ||
| return ( | ||
| <> | ||
| {todosAPI.error && 'Error!'} | ||
| {todos.map(todo => ( | ||
| <div key={todo.id}>{todo.title}</div> | ||
| )} | ||
| {!todosAPI.loading && 'Loading Initial Todos...'} | ||
| <button onClick={loadMore}>{loadingMore ? 'Loading More...' : 'Load More'}</button> | ||
| </> | ||
| ) | ||
| } | ||
| ``` | ||
| <a target="_blank" rel="noopener noreferrer" href='https://codesandbox.io/s/usefetch-provider-pagination-exttg?file=/src/index.js'><img width='150px' height='30px' src='https://codesandbox.io/static/img/play-codesandbox.svg' /></a> <a target="_blank" rel="noopener noreferrer" href='https://www.youtube.com/watch?v=YmcMjRpIYqU&list=PLZIwrWkE9rCdUybd8t3tY-mUMvXkCdenW&index=5'><img width='150px' height='30px' src='https://github.com/ava/use-http/raw/master/public/watch-youtube-video.png' /></a> | ||
@@ -338,2 +378,3 @@ | ||
| error, // if we get a bad network call, this is the error | ||
| path, // in this case, would be `/api` | ||
| // all the rest are normal fields of the JS Response class | ||
@@ -406,4 +447,8 @@ ...response | ||
| // const [loading, setLoading] = useState(false) | ||
| const [getTodosForUser, loading] = load(async id => await userAPI.query({ userID: id })) | ||
| const [loading, setLoading] = useState(false) | ||
| const getTodosForUser = async id => { | ||
| setLoading(true) | ||
| await userAPI.query({ userID: id }) | ||
| setLoading(false) | ||
| } | ||
@@ -421,3 +466,3 @@ return ( | ||
| <details><summary><b>GraphQL Mutation <code>useFetch</code></b></summary> | ||
| <!-- <details><summary><b>GraphQL Mutation <code>useFetch</code></b></summary> | ||
@@ -452,5 +497,5 @@ The `Provider` allows us to set a default `url`, `options` (such as headers) and so on. | ||
| ``` | ||
| </details> | ||
| </details> --> | ||
| <!-- | ||
| <details><summary><b><code>Provider</code> using the GraphQL <code>useMutation</code> and <code>useQuery</code></b></summary> | ||
@@ -460,3 +505,3 @@ | ||
| ```jsx | ||
| import { useQuery } from 'use-http' | ||
| import { useQuery } from 'uf' | ||
@@ -494,3 +539,3 @@ export default function QueryComponent() { | ||
| ```jsx | ||
| import { useMutation } from 'use-http' | ||
| import { useMutation } from 'uf' | ||
@@ -529,3 +574,3 @@ export default function MutationComponent() { | ||
| ```jsx | ||
| import { Provider } from 'use-http' | ||
| import { Provider } from 'uf' | ||
| import QueryComponent from './QueryComponent' | ||
@@ -551,3 +596,3 @@ import MutationComponent from './MutationComponent' | ||
| </details> | ||
| </details> --> | ||
@@ -560,3 +605,3 @@ | ||
| ```jsx | ||
| import { Provider } from 'use-http' | ||
| import { Provider } from 'uf' | ||
| import { toCamel } from 'convert-keys' | ||
@@ -609,3 +654,3 @@ | ||
| ```jsx | ||
| import useFetch from 'use-http' | ||
| import useFetch from 'uf' | ||
@@ -639,3 +684,3 @@ const FileUploader = () => { | ||
| ```js | ||
| import useFetch from 'use-http' | ||
| import useFetch from 'uf' | ||
@@ -674,3 +719,3 @@ const App = () => { | ||
| ```js | ||
| import useFetch from 'use-http' | ||
| import useFetch from 'uf' | ||
@@ -710,3 +755,3 @@ const Todos = () => { | ||
| ```js | ||
| import useFetch from 'use-http' | ||
| import useFetch from 'uf' | ||
@@ -747,5 +792,5 @@ const TestRetry = () => { | ||
| Overview | ||
| Options | ||
| -------- | ||
| <!-- | ||
| ### Hooks | ||
@@ -757,8 +802,6 @@ | ||
| | `useQuery` | For making a GraphQL query | | ||
| | `useMutation` | For making a GraphQL mutation | | ||
| </details> | ||
| | `useMutation` | For making a GraphQL mutation | --> | ||
| ### Options | ||
| <!-- ### Options --> | ||
@@ -765,0 +808,0 @@ This is exactly what you would pass to the normal js `fetch`, with a little extra. All these options can be passed to the `<Provider options={/* every option below */} />`, or directly to `useFetch`. If you have both in the `<Provider />` and in `useFetch`, the `useFetch` options will overwrite the ones from the `<Provider />` |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
New author
Supply chain riskA new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by0.87%
138868
- Number of lines in readme file
- increased by4.29%
1045
- Number of medium supply chain risk alerts
- decreased by-66.67%
1