react-fetch-hook - npm Package Compare versions

Comparing version 1.5.2 to 1.6.0-alpha.0

package.json

 {
   "name": "react-fetch-hook",
-  "version": "1.5.2",
+  "version": "1.6.0-alpha.0",
   "description": "React fetch hook",
-  "main": "./dist/index.js",
   "scripts": {
@@ -10,18 +9,19 @@ "flow": "flow",
     "typescript": "tsc -p tsconfig.json --noEmit",
-    "copy:ts": "cp ./src/index.d.ts ./dist/index.d.ts",
     "test": "jest --silent",
-    "prettier": "prettier \"*/**/*.js\" --ignore-path ./.prettierignore --write && git add . && git status",
-    "build": "npm run build:clean && npm run build:lib && npm run build:flow && npm run copy:ts",
-    "build:clean": "rimraf dist",
-    "build:lib": "cross-env BABEL_ENV=production babel src --out-dir dist --ignore '**/__tests__/**'",
-    "build:flow": "gen-flow-files src --out-dir dist",
     "size": "size-limit",
-    "prepublish": "npm run flow:check && npm run test && npm run build"
+    "lint": "eslint '**/*.{js,jsx}' --quiet",
+    "prepublish": "npm run flow:check && npm run typescript && npm run lint && npm run size && npm run test"
   },
-  "jest": {
-    "setupTestFrameworkScriptFile": "./setupTests.js",
-    "moduleNameMapper": {
-      "\\.(svg|png)$": "<rootDir>/__mocks__/fileMock.js"
+  "eslintConfig": {
+    "extends": "@logux/eslint-config/browser",
+    "rules": {
+      "node/no-unpublished-require": "off",
+      "es5/no-es6-static-methods": "off",
+      "node/no-missing-require": "off",
+      "func-style": "off"
     }
   },
+  "jest": {
+    "setupTestFrameworkScriptFile": "./jest/setupTests.js"
+  },
   "size-limit": [
@@ -32,13 +32,30 @@ {
       ],
-      "path": "dist/index.js"
+      "limit": "393 B",
+      "path": "index.js"
+    },
+    {
+      "ignore": [
+        "react"
+      ],
+      "limit": "186 B",
+      "path": "usePaginatedRequest.js"
     }
   ],
   "files": [
-    "dist",
-    "src"
+    "utils",
+    "index.js",
+    "index.js.flow",
+    "index.d.ts",
+    "usePromise.js",
+    "usePromise.js.flow",
+    "usePromise.d.ts",
+    "usePaginatedRequest.js",
+    "usePaginatedRequest.js.flow",
+    "usePaginatedRequest.d.ts"
   ],
   "pre-commit": [
-    "prettier",
+    "lint",
     "flow:check",
-    "test"
+    "test",
+    "size"
   ],
@@ -69,2 +86,3 @@ "repository": {
     "@babel/preset-react": "^7.0.0",
+    "@logux/eslint-config": "^28.2.1",
     "babel-core": "^7.0.0-bridge.0",
@@ -74,4 +92,14 @@ "babel-plugin-react-flow-props-to-prop-types": "^0.15.0",
     "cross-env": "^5.2.0",
+    "eslint": "^5.16.0",
+    "eslint-config-standard": "^12.0.0",
+    "eslint-plugin-es5": "^1.3.1",
+    "eslint-plugin-import": "^2.17.2",
+    "eslint-plugin-import-helpers": "^0.1.4",
+    "eslint-plugin-jest": "^22.5.1",
+    "eslint-plugin-node": "^9.0.1",
+    "eslint-plugin-prefer-let": "^1.0.1",
+    "eslint-plugin-promise": "^4.1.1",
+    "eslint-plugin-security": "^1.4.0",
+    "eslint-plugin-standard": "^4.0.0",
     "flow-bin": "^0.89.0",
-    "gen-flow-files": "^0.4.1",
     "jest": "^23.6.0",
@@ -81,3 +109,2 @@ "jest-dom": "^3.0.0",
     "pre-commit": "^1.2.2",
-    "prettier": "^1.15.3",
     "react": "^16.8.0",
@@ -84,0 +111,0 @@ "react-dom": "^16.8.0",

README.md

@@ -9,7 +9,8 @@ # react-fetch-hook
 
-Both **Flow** and **TypeScript** types included.
+* **Tiny** (393 B). Calculated by [size-limit](https://github.com/ai/size-limit)
+* Both **Flow** and **TypeScript** types included
 
 ```javascript
 import React from "react";
-import { useFetch } from "react-fetch-hook";
+import useFetch from "react-fetch-hook";
 
@@ -30,7 +31,2 @@ const Component = () => {
 
-<a href="https://lessmess.agency/?utm_source=react-fetch-hook">
-  <img src="https://lessmess.agency/badges/sponsored_by_lessmess.svg"
-       alt="Sponsored by Lessmess" width="236" height="54">
-</a>
-
 ## Installation
@@ -50,35 +46,8 @@
 
-## API
+## Features
 
-### `useFetch`
-Create a hook wrapper for `fetch` call. 
-```javascript
-useFetch(
-    path: RequestInfo,
-    options?: {
-        ...RequestOptions,
-        formatter?: Response => Promise
-        depends?: Array<boolean>
-    },
-    specialOptions?: {
-        depends?: Array<boolean>
-    }
-): TUseFetchResult
-```
-where `TUseFetchResult` is:
-```javascript
-{
-    data: any,
-    isLoading: boolean,
-    error: any
-}
-```
-#### Options:
-##### RequestInfo, RequestOptions
- `RequestInfo`, `RequestOptions` is [fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch) args.
+### Custom formatter
 
-##### formatter
-`formatter` - optional formatter function. 
-Default is `response => response.json()` formatter.
-Example:
+Default is `response => response.json()` formatter. You can pass custom formatter:
+
 ```javascript
@@ -91,3 +60,3 @@ const { isLoading, data } = useFetch("https://swapi.co/api/people/1", {
 
-##### depends
+### Depends
 The request will not be called until all elements of `depends` array be truthy. Example:
@@ -104,2 +73,3 @@
 
+### Re-call requests
 If any element of `depends` changed, request will be re-call. For example, you can use [react-use-trigger](https://github.com/ilyalesik/react-use-trigger) for re-call the request:
@@ -127,7 +97,81 @@ ```javascript
 }
+```
 
+### usePromise
+For custom promised function.
 
+```javascript
+import React from "react";
+import usePromise from "react-fetch-hook/usePromise";
+import callPromise from "..."
 
+const Component = () => {
+  const { isLoading, data } = usePromise(() => callPromise(...params), [...params]);
+
+  return isLoading ? (
+    <div>Loading...</div>
+  ) : (
+    <UserProfile {...data} />
+  );
+};
 ```
 
+### Paginated requests
+
+```javascript
+import React from "react";
+import usePaginatedRequest from "react-fetch-hook/usePaginatedRequest";
+import fetchSomeData from "..."
+
+const Component = () => {
+    const results = usePaginatedRequest(
+        ({limit, offset}) => fetchSomeData(limit, offset),
+        20
+    );
+
+    return (
+        <InfiniteScroll
+            pageStart={0}
+            loadMore={results.loadMore}
+            hasMore={results.hasMore}
+            loader={<div />}>
+            {results.data && results.data.map((item) => {
+                ...
+            })}
+        </InfiniteScroll>)
+}      
+```
+
+
+
+## API
+
+### `useFetch`
+Create a hook wrapper for `fetch` call. 
+```javascript
+useFetch(
+    path: RequestInfo,
+    options?: {
+        ...RequestOptions,
+        formatter?: Response => Promise
+        depends?: Array<boolean>
+    },
+    specialOptions?: {
+        formatter?: Response => Promise
+        depends?: Array<boolean>
+    }
+): TUseFetchResult
+```
+where `TUseFetchResult` is:
+```javascript
+{
+    data: any,
+    isLoading: boolean,
+    error: any
+}
+```
+
+ `RequestInfo`, `RequestOptions` is [fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch) args.
+
+
 ### `usePromise`
@@ -161,1 +205,7 @@ ```javascript
 ```
+
+## Sponsored
+<a href="https://lessmess.agency/?utm_source=react-fetch-hook">
+  <img src="https://lessmess.agency/badges/sponsored_by_lessmess.svg"
+       alt="Sponsored by Lessmess" width="236" height="54">
+</a>

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

Major refactor

Supply chain risk

Package 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

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

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

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Improved metrics

Number of lines in readme file

205

increased by32.26%

Number of low supply chain risk alerts

0

decreased by-100%

Number of medium supply chain risk alerts

2

decreased by-94.29%

Worsened metrics

Total package byte prevSize

13915

decreased by-68.29%

Dev dependency count

33

increased by43.48%

Number of package files

13

decreased by-45.83%

Lines of code

149

decreased by-82.39%

Number of low quality alerts

1

increased byInfinity%

No dependency changes