react-native-fetch - npm Package Compare versions

Comparing version 1.0.0 to 2.0.0

index.js

 /* global fetch */
 /* eslint no-unused-vars: "off" */
-import React, {Component, PropTypes} from 'react'
+import React, { Component } from 'react'
+import T from 'prop-types'
+import tenFetch from 'tenacious-fetch'
 
+const noop = () => {}
+
 class Fetch extends Component {
   static propTypes = {
-    url: PropTypes.string.isRequired,
-    onResponse: PropTypes.func,
-    onError: PropTypes.func,
-    method: PropTypes.oneOf(['GET', 'POST', 'PUT', 'DELETE']),
-    body: PropTypes.oneOfType([
-      PropTypes.object,
-      PropTypes.string
-    ]),
-    headers: PropTypes.object,
-    credentials: PropTypes.string
-  }
+    url: T.string.isRequired,
+    onResponse: T.func,
+    onError: T.func,
+    method: T.oneOf(['GET', 'POST', 'PUT', 'DELETE', 'PATCH']),
+    body: T.oneOfType([T.object, T.string]),
+    headers: T.object,
+    credentials: T.string,
+    retries: T.number,
+    timeout: T.number
+  };
 
   static defaultProps = {
     method: 'GET',
-    onResponse: () => {},
-    onError: () => {}
-  }
+    onResponse: noop,
+    onError: noop
+  };
 
   componentDidMount = () => {
     if (fetch) {
-      this._handleRequest()
+      this.handleReqeuest()
     } else {
       throw new Error('fetch API required to perform request')
     }
-  }
+  };
 
@@ -37,27 +40,18 @@ render () {
 
-  _handleRequest = () => {
-    const {url, onResponse, onError, method, body, headers, credentials} = this.props
+  handleReqeuest = () => {
+    const { url, onResponse, onError, ...propConfig } = this.props
 
-    let options = {
-      method
-    }
+    const defaultConfig = Object.assign(
+      {
+        fetcher: fetch
+      },
+      propConfig
+    )
 
-    if (headers) {
-      options.headers = headers
-    }
-
-    if (body) {
-      options.body = body
-    }
-
-    if (credentials) {
-      options.credentials = credentials
-    }
-
-    fetch(url, options)
+    return tenFetch(url, defaultConfig)
       .then(onResponse)
       .catch(onError)
-  }
+  };
 }
 
 export default Fetch

package.json

 {
   "name": "react-native-fetch",
-  "version": "1.0.0",
-  "description": "Fetch API wrapped as a component for React Native",
+  "version": "2.0.0",
+  "description": "Fetch API wrapped as a component with support for retries & timeouts",
   "license": "MIT",
@@ -13,13 +13,6 @@ "main": "index.js",
   "bugs": "https://github.com/tiaanduplessis/react-native-fetch/issues",
-  "author": {
-    "name": "Tiaan",
-    "email": "[e-mail]",
-    "url": "tiaanduplessis.co.za"
-  },
+  "author": "Tiaan du Plessis",
   "scripts": {
-    "start": "npm run dev",
     "test": "npm run lint",
-    "lint": "standard --parser babel-eslint --verbose",
-    "lint:fix": "standard --parser babel-eslint --fix --verbose",
-    "precommit": "npm test"
+    "lint": "standard --fix"
   },
@@ -35,7 +28,19 @@ "keywords": [
   ],
-  "dependencies": {},
   "devDependencies": {
-    "husky": "^0.13.3",
-    "standard": "^10.0.1"
+    "babel-eslint": "^8.2.3",
+    "standard": "^11.0.1"
+  },
+  "peerDependencies": {
+    "react": "*"
+  },
+  "dependencies": {
+    "prop-types": "^15.6.1",
+    "tenacious-fetch": "^2.0.0"
+  },
+  "standard": {
+    "parser": "babel-eslint",
+    "ignore": [
+      "example.js"
+    ]
   }
 }

README.md

@@ -1,70 +0,29 @@
-<h1 align="center">🌍 react-native-fetch</h1>
-<div align="center">
-  <strong>Fetch API wrapped as a component for React Native</strong>
-</div>
-<br>
-<div align="center">
-  <a href="https://npmjs.org/package/react-native-fetch">
-    <img src="https://img.shields.io/npm/v/react-native-fetch.svg?style=flat-square" alt="Package version" />
-  </a>
-  <a href="https://npmjs.org/package/react-native-fetch">
-  <img src="https://img.shields.io/npm/dm/react-native-fetch.svg?style=flat-square" alt="Downloads" />
-  </a>
-  <a href="https://github.com/feross/standard">
-    <img src="https://img.shields.io/badge/code%20style-standard-brightgreen.svg?style=flat-square" alt="Standard" />
-  </a>
-  <a href="https://travis-ci.org/tiaanduplessis/react-native-fetch">
-    <img src="https://img.shields.io/travis/tiaanduplessis/react-native-fetch.svg?style=flat-square" alt="Travis Build" />
-  </a>
-  <a href="https://github.com/RichardLitt/standard-readme)">
-    <img src="https://img.shields.io/badge/standard--readme-OK-green.svg?style=flat-square" alt="Standard Readme" />
-  </a>
-  <a href="https://badge.fury.io/gh/tiaanduplessis%2Freact-native-fetch">
-    <img src="https://badge.fury.io/gh/tiaanduplessis%2Freact-native-fetch.svg?style=flat-square" alt="GitHub version" />
-  </a>
-  <a href="https://dependencyci.com/github/tiaanduplessis/react-native-fetch">
-    <img src="https://dependencyci.com/github/tiaanduplessis/react-native-fetch/badge?style=flat-square" alt="Dependency CI" />
-  </a>
-  <a href="https://github.com/tiaanduplessis/react-native-fetch/blob/master/LICENSE">
-    <img src="https://img.shields.io/npm/l/react-native-fetch.svg?style=flat-square" alt="License" />
-  </a>
-  <a href="http://makeapullrequest.com">
-    <img src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square" alt="PRs" />
-  </a>
-  <a href="https://www.paypal.me/tiaanduplessis/1">
-    <img src="https://img.shields.io/badge/$-support-green.svg?style=flat-square" alt="Donate" />
-  </a>
-</div>
-<br>
-<div align="center">
-  <a href="https://github.com/tiaanduplessis/react-native-fetch/watchers">
-    <img src="https://img.shields.io/github/watchers/tiaanduplessis/react-native-fetch.svg?style=social" alt="Github Watch Badge" />
-  </a>
-  <a href="https://github.com/tiaanduplessis/react-native-fetch/stargazers">
-    <img src="https://img.shields.io/github/stars/tiaanduplessis/react-native-fetch.svg?style=social" alt="Github Star Badge" />
-  </a>
-  <a href="https://twitter.com/intent/tweet?text=Check%20out%20react-native-fetch!%20https://github.com/tiaanduplessis/react-native-fetch%20%F0%9F%91%8D">
-    <img src="https://img.shields.io/twitter/url/https/github.com/tiaanduplessis/react-native-fetch.svg?style=social" alt="Tweet" />
-  </a>
-</div>
-<br>
-<div align="center">
-  Built with ❤︎ by <a href="tiaanduplessis.co.za">Tiaan</a> and <a href="https://github.com/tiaanduplessis/react-native-fetch/graphs/contributors">contributors</a>
-</div>
 
-<h2>Table of Contents</h2>
-<details>
-  <summary>Table of Contents</summary>
-  <li><a href="#install">Install</a></li>
-  <li><a href="#usage">Usage</a></li>
-  <li><a href="#contribute">Contribute</a></li>
-  <li><a href="#license">License</a></li>
-</details>
+# react-native-fetch
+[![package version](https://img.shields.io/npm/v/react-native-fetch.svg?style=flat-square)](https://npmjs.org/package/react-native-fetch)
+[![package downloads](https://img.shields.io/npm/dm/react-native-fetch.svg?style=flat-square)](https://npmjs.org/package/react-native-fetch)
+[![standard-readme compliant](https://img.shields.io/badge/readme%20style-standard-brightgreen.svg?style=flat-square)](https://github.com/RichardLitt/standard-readme)
+[![package license](https://img.shields.io/npm/l/react-native-fetch.svg?style=flat-square)](https://npmjs.org/package/react-native-fetch)
+[![make a pull request](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com) [![Standard](https://img.shields.io/badge/code%20style-standard-brightgreen.svg?style=flat-square)](https://github.com/feross/standard)
+[![Travis](https://img.shields.io/travis/tiaanduplessis/react-native-fetch.svg?style=flat-square)](https://travis-ci.org/tiaanduplessis/react-native-fetch)
+[![Dependency CI](https://dependencyci.com/github/tiaanduplessis/react-native-fetch/badge?style=flat-square)](https://dependencyci.com/github/tiaanduplessis/react-native-fetch)
+[![Greenkeeper badge](https://badges.greenkeeper.io/tiaanduplessis/react-native-fetch.svg)](https://greenkeeper.io/)
 
 
+> Fetch API wrapped as a component with support for retries & timeouts
+
+## Table of Contents
+
+- [Install](#install)
+- [Usage](#usage)
+- [Contribute](#contribute)
+- [License](#License)
+
 ## Install
 
+This project uses [node](https://nodejs.org) and [npm](https://www.npmjs.com). 
+
 ```sh
-$ npm install --save react-native-fetch
-# OR
+$ npm install react-native-fetch
+$ # OR
 $ yarn add react-native-fetch
@@ -75,14 +34,7 @@ ```
 
-```jsx
-import Fetch from './fetch'
+```js
+import Fetch from 'react-native-fetch'
 
 export default class Home extends Component {
 
-  _handleResponse = (res) => {
-    console.log(res)
-    res.text().then(console.log).catch(console.log)
-  }
-
- _handleError = (error) => console.log(error)
-
  render () {
@@ -92,5 +44,10 @@ return (
         <Fetch
-          url="https://jsonplaceholder.typicode.com"
-          onResponse={this._handleResponse}
-          onError={this._handleError}
+          url="https://jsonplaceholder.typicode.com/posts/1"
+          retries={3}
+          timeout={3000}
+          onResponse={async (res) => {
+            const json = await res.json()
+            console.log(json)
+          }}
+          onError={console.error}
         />
@@ -101,3 +58,2 @@ </View>
 }
-
 ```
@@ -113,16 +69,15 @@
 -  `headers` (Object, Headers)- HTTP request headers to send.  Default: {}
-- `credentials` (String) - Authentication credentials mode. Default: 'omit'
 
+See [tenacious-fetch](https://github.com/tiaanduplessis/tenacious-fetch) for more information about supported props.
 
-Check out the [fetch docs](https://github.github.io/fetch/) for more info.
-
-
 ## Contribute
 
-Contributions are welcome. Please open up an issue or create PR if you would like to help out.
+1. Fork it and create your feature branch: git checkout -b my-new-feature
+2. Commit your changes: git commit -am 'Add some feature'
+3. Push to the branch: git push origin my-new-feature 
+4. Submit a pull request
 
-Note: If editing the README, please conform to the [standard-readme](https://github.com/RichardLitt/standard-readme) specification.
-
 ## License
 
-Licensed under the MIT License.
+MIT
+    

New alerts

License Policy Violation

License

This 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

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Lines of code

66

increased by29.41%

Worsened metrics

Total package byte prevSize

6911

decreased by-16.43%

Dependency count

3

increased byInfinity%

Number of lines in readme file

79

decreased by-36.8%

Dependency changes

• + Addedprop-types@^15.6.1

• + Addedtenacious-fetch@^2.0.0

• + Addedabortcontroller-polyfill@1.7.6(transitive)

• + Addedjs-tokens@4.0.0(transitive)

• + Addedloose-envify@1.4.0(transitive)

• + Addedobject-assign@4.1.1(transitive)

• + Addedprop-types@15.8.1(transitive)

• + Addedreact@18.3.1(transitive)

• + Addedreact-is@16.13.1(transitive)

• + Addedtenacious-fetch@2.3.1(transitive)

• + Addedwhatwg-fetch@3.6.20(transitive)