use-http - npm Package Compare versions

Comparing version 0.1.50 to 0.1.58

package.json

 {
   "name": "use-http",
-  "version": "0.1.50",
+  "version": "0.1.58",
   "homepage": "https://codesandbox.io/embed/km04k9k9x5",
@@ -25,6 +25,11 @@ "main": "dist/index.js",
   "dependencies": {
+    "idempotent-babel-polyfill": "^7.0.0",
     "react": "^16.8.6"
   },
   "devDependencies": {
-    "idempotent-babel-polyfill": "^7.0.0",
+    "@babel/core": "^7.4.3",
+    "@babel/preset-env": "^7.4.3",
+    "@babel/preset-react": "^7.0.0",
+    "babel-jest": "^24.7.1",
+    "jest": "^24.7.1",
     "parcel-bundler": "^1.12.3",
@@ -35,4 +40,9 @@ "react-dom": "^16.8.6"
     "dev": "parcel examples/index.html --open",
-    "build": "parcel build --target node ./src/*"
-  }
+    "build": "parcel build --target node ./src/*",
+    "test": "jest",
+    "publish": "yarn build && yarn publish"
+  },
+  "files": [
+    "dist"
+  ]
 }

README.md

@@ -7,2 +7,5 @@ <h1 align="center">useFetch</h1>
     </a>
+    <a href="https://circleci.com/gh/alex-cory/use-http">
+      <img src="https://img.shields.io/circleci/project/github/alex-cory/use-http/master.svg" />
+    </a>
 </p>
@@ -16,3 +19,2 @@
 
-
 Installation
@@ -22,3 +24,3 @@ ------------
 ```shell
-yarn add use-http
+yarn add use-http    or    npm i -S use-http
 ```
@@ -33,3 +35,3 @@
 
-function App() {
+function Todos() {
   const options = { // accepts all `fetch` options
@@ -39,22 +41,19 @@ onMount: true // will fire on componentDidMount
   
-  var [data, loading, error, request] = useFetch('https://example.com', options)
+  const todos = useFetch('https://example.com/todos', options)
   
-  // want to use object destructuring? You can do that too
-  var { data, loading, error, request } = useFetch('https://example.com')
-  
-  const postData = () => {
-    request.post({
-      no: 'way',
+  const addTodo = () => {
+    todos.post({
+      title: 'no way',
     })
   }
 
-  if (error) return 'Error!'
-  if (loading) return 'Loading!'
+  if (todos.error) return 'Error!'
+  if (todos.loading) return 'Loading...'
   
   return (
     <>
-      <button onClick={postData}>Post Some Data</button>
-      <code>
-        <pre>{data}</pre>
-      </code>
+      <button onClick={addTodo}>Add Todo</button>
+      {todos.data.map(todo => (
+        <div key={todo.id}>{todo.title}</div>
+      )}
     </>
@@ -66,7 +65,8 @@ )
 ```jsx
-var [data, loading, error, { post }] = useFetch('https://example.com')
+var [data, loading, error, request] = useFetch('https://example.com')
 
-var { data, loading, error, post } = useFetch('https://example.com')
+// want to use object destructuring? You can do that too
+var { data, loading, error, request } = useFetch('https://example.com')
 
-post({
+request.post({
   no: 'way',
@@ -77,3 +77,3 @@ })
 ```jsx
-const [data, loading, error, request] = useFetch({
+const request = useFetch({
   baseUrl: 'https://example.com'
@@ -103,15 +103,21 @@ })
 
-#### Coming Soon: `abort`
+#### Abort
 
+<img src="public/abort-example-1.gif" height="250" />
+
+
 ```jsx
-const { data, loading, request } = useFetch({
-  baseUrl: `https://api.github.com/search`
+const githubRepos = useFetch({
+  baseUrl: `https://api.github.com/search/repositories?q=`
 })
 
-const searchGithub = e => request.get(`/repositories?q=${e.target.value || "''"}`)
+// the line below is not isomorphic, but for simplicity we're using the browsers `encodeURI`
+const searchGithubRepos = e => githubRepos.get(encodeURI(e.target.value))
 
 <>
-  <input onChange={searchGithub} />
-  <button onClick={request.abort}>Abort</button>
-  {loading ? 'Loading...' : <code><pre>{data}</pre></code>}
+  <input onChange={searchGithubRepos} />
+  <button onClick={githubRepos.abort}>Abort</button>
+  {githubRepos.loading ? 'Loading...' : githubRepos.data.items.map(repo => (
+    <div key={repo.id}>{repo.name}</div>
+  ))}
 </>
@@ -151,4 +157,4 @@ ```
   put,
-  del,
-  // delete
+  delete // don't destructure `delete` though, it's a keyword
+  del,   // <- that's why we have this (del). or use `request.delete`
 } = useFetch({
@@ -160,15 +166,39 @@ url: 'https://example.com',
 ```
+or
+```jsx
+const [data, loading, error, request] = useFetch({
+  url: 'https://example.com',
+  baseUrl: 'https://example.com',
+  onMount: true
+})
 
+const {
+  get,
+  post,
+  patch,
+  put,
+  delete // don't destructure `delete` though, it's a keyword
+  del,   // <- that's why we have this (del). or use `request.delete`
+} = request
+```
+
 Credits
 --------
-use-http is heavily inspired by the popular http client [axios](https://github.com/axios/axios) 
+use-http is heavily inspired by the popular http client [axios](https://github.com/axios/axios)
 
+Feature Requests/Ideas
+----------------------
+If you have feature requests, let's talk about them in [this issue](https://github.com/alex-cory/use-http/issues/13)!
+
 Todos
 ------
- - [ ] Make abortable (add `abort` to abort the http request)
- - [ ] Make work with React Suspense
+ - [ ] Make work with React Suspense [current example WIP](https://codesandbox.io/s/7ww5950no0)
  - [ ] Allow option to fetch on server instead of just having `loading` state
  - [ ] Allow option for callback for response.json() vs response.text()
  - [ ] add `timeout`
+ - [ ] add `debounce`
+ - [ ] if 2nd param of `post` or one of the methods is a `string` treat it as query params
  - [ ] error handling if no url is passed
  - [ ] tests
+ - [ ] port to typescript
+ - [ ] badges, I like the way [these guys do it](https://github.com/GitSquared/edex-ui)

Fixed alerts

Network access

Supply chain risk

This module accesses the network.

Found 1 instance in 1 package

Dynamic require

Supply chain risk

Dynamic require can indicate the package is performing dangerous or unsafe dynamic code execution.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Improved metrics

Number of low quality alerts

1

decreased by-87.5%

Number of lines in readme file

195

increased by18.18%

Number of low supply chain risk alerts

0

decreased by-100%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

3282003

decreased by-2.68%

Dependency count

3

increased by50%

Dev dependency count

7

increased by133.33%

Number of package files

6

decreased by-79.31%

Lines of code

28882

decreased by-1.42%

Dependency changes

• + Addedidempotent-babel-polyfill@^7.0.0

• + Added@babel/polyfill@7.4.4(transitive)

• + Addedcore-js@2.6.12(transitive)

• + Addedidempotent-babel-polyfill@7.4.4(transitive)

• + Addedregenerator-runtime@0.13.11(transitive)