uf - npm Package Compare versions
Comparing version 0.1.2 to 0.1.3
| { | ||
| "name": "uf", | ||
| "version": "0.1.2", | ||
| "version": "0.1.3", | ||
| "homepage": "https://usefet.ch", | ||
@@ -5,0 +5,0 @@ "main": "dist/index.js", |
@@ -111,3 +111,4 @@ [![use-http logo][3]][5] | ||
| function Todos() { | ||
| // this will run a GET to /todos on mount, and load the data into `todos` | ||
| // this will run a GET to /todos on mount, and load the | ||
| // data into `todos`. AKA NON-LAZY | ||
| const [todos = [], setTodos, todosAPI] = useFetch('/todos') | ||
@@ -118,3 +119,3 @@ | ||
| setAdding(true) | ||
| // all methods inside `todosAPI` are lazy. | ||
| // all methods inside `todosAPI` are LAZY. | ||
| // Aka, you must call `setTodos` to update `todos` | ||
@@ -354,3 +355,3 @@ // AND you must handle your own loading state | ||
| const { | ||
| loading, | ||
| loading, // ONLY CHANGES WHEN CALLED VIA NON-LAZY | ||
| error, | ||
@@ -644,3 +645,3 @@ cache, // methods: get, set, has, delete, clear (like `new Map()`) | ||
| const { post } = useFetch('https://example.com/upload') | ||
| const { post } = useFetch('/upload') | ||
@@ -650,3 +651,3 @@ const uploadFile = async () => { | ||
| data.append('file', file) | ||
| if (file instanceof FormData) await post(data) | ||
| await post(data) | ||
| } | ||
@@ -665,31 +666,3 @@ | ||
| <details><summary><b>Handling Different Response Types</b></summary> | ||
| This example shows how we can get `.json()`, `.text()`, `.formData()`, `.blob()`, `.arrayBuffer()`, and all the other [http response methods](https://developer.mozilla.org/en-US/docs/Web/API/Response#Methods). By default, `useFetch` 1st tries to call `response.json()` under the hood, if that fails it's backup is `response.text()`. If that fails, then you need a different response type which is where this comes in. | ||
| ```js | ||
| import useFetch from 'uf' | ||
| const App = () => { | ||
| const [name, setName] = useState('') | ||
| const { get, loading, error, response } = useFetch('http://example.com') | ||
| const handleClick = async () => { | ||
| await get('/users/1?name=true') // will return just the user's name | ||
| const text = await response.text() | ||
| setName(text) | ||
| } | ||
| return ( | ||
| <> | ||
| <button onClick={handleClick}>Load Data</button> | ||
| {error && error.messge} | ||
| {loading && "Loading..."} | ||
| {name && <div>{name}</div>} | ||
| </> | ||
| ) | ||
| } | ||
| ``` | ||
| <a target="_blank" rel="noopener noreferrer" href='https://codesandbox.io/s/usefetch-different-response-types-c6csw'><img width='150px' height='30px' src='https://codesandbox.io/static/img/play-codesandbox.svg' /></a> | ||
@@ -709,11 +682,11 @@ <!-- <a target="_blank" rel="noopener noreferrer" href='XXXXXX'><img width='150px' height='30px' src='https://github.com/ava/use-http/raw/master/public/watch-youtube-video.png' /></a> --> | ||
| // let's say for this request, you don't want the `Accept` header at all | ||
| const { loading, error, data: todos = [] } = useFetch('/todos', globalOptions => { | ||
| const [todos = [],, todosAPI]= useFetch('/todos', globalOptions => { | ||
| delete globalOptions.headers.Accept | ||
| return globalOptions | ||
| }, []) // onMount | ||
| }) | ||
| return ( | ||
| <> | ||
| {error && error.messge} | ||
| {loading && "Loading..."} | ||
| {todos && <ul>{todos.map(todo => <li key={todo.id}>{todo.title}</li>)}</ul>} | ||
| {todosAPI.error && todosAPI.error.messge} | ||
| {todosAPI.loading && "Loading Initial Todos..."} | ||
| {todos.map(todo => <li key={todo.id}>{todo.title}</li>)} | ||
| </> | ||
@@ -743,4 +716,4 @@ ) | ||
| const TestRetry = () => { | ||
| const { response, get } = useFetch('https://httpbin.org/status/305', { | ||
| const TodosRetry = () => { | ||
| const [todos = []] = useFetch('https://httpbin.org/status/305', { | ||
| // make sure `retries` is set otherwise it won't retry | ||
@@ -765,8 +738,3 @@ retries: 1, | ||
| return ( | ||
| <> | ||
| <button onClick={() => get()}>CLICK</button> | ||
| <pre>{JSON.stringify(response, null, 2)}</pre> | ||
| </> | ||
| ) | ||
| return todos.map(todo => <div key={todo.id}>{todo.title}</div> | ||
| } | ||
@@ -781,2 +749,3 @@ ``` | ||
| -------- | ||
| <!-- | ||
@@ -791,5 +760,2 @@ ### Hooks | ||
| <!-- ### Options --> | ||
| 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 />` | ||
@@ -796,0 +762,0 @@ |
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
Worsened metrics
- Total package byte prevSize
- decreased by-0.81%
137582
- Number of lines in readme file
- decreased by-3.25%
1011