├── .editorconfig ├── .github └── workflows │ └── publish.yml ├── .gitignore ├── .travis.yml ├── README.md ├── package-lock.json ├── package.json ├── rollup.config.js ├── src ├── index.tsx ├── test.ts └── typings.d.ts ├── tsconfig.json ├── tsconfig.test.json └── yarn-error.log /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | -------------------------------------------------------------------------------- /.github/workflows/publish.yml: -------------------------------------------------------------------------------- 1 | name: Publish 2 | 3 | on: 4 | release: 5 | types: [published] 6 | 7 | jobs: 8 | build: 9 | runs-on: ubuntu-latest 10 | steps: 11 | # Checkout the repo 12 | - uses: actions/checkout@master 13 | # Publish to NPMJS 14 | - uses: actions/setup-node@master 15 | with: 16 | node-version: 12 17 | registry-url: 'https://registry.npmjs.org/' 18 | - name: Publish to NPMJS 19 | run: | 20 | npm config set //registry.npmjs.org/:_authToken=$NODE_AUTH_TOKEN 21 | npm config set scope "@soroush_chs" 22 | npm install 23 | npm publish --access public 24 | env: 25 | CI: true 26 | NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}} 27 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist 3 | .idea 4 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - 9 4 | - 8 5 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |
2 | 3 | # Axios React 4 | [![NPM](https://img.shields.io/npm/v/axios-react.svg)](https://www.npmjs.com/package/axios-react) 5 | [![NPM](https://img.shields.io/npm/dt/axios-react)](https://www.npmjs.com/package/axios-react) 6 | [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com) 7 | 8 | HTTP client component for React with child function callback to create async requests in render based on [Axios](https://github.com/axios/axios). 9 |
10 | 11 |
12 | 13 | ## Installation 14 | Yarn: 15 | ```bash 16 | $ yarn add axios-react 17 | ``` 18 | npm: 19 | ```bash 20 | $ npm i -S axios-react 21 | ``` 22 | 23 |
24 | 25 | ## Live example 26 | **[Online Playground](https://stackblitz.com/edit/react-2et9ls)** 27 | 28 |
29 | 30 | ## Usage 31 | 32 | ```jsx 33 | import React from 'react'; 34 | import Request from 'axios-react'; 35 | 36 | const Demo = () => ( 37 | 43 | {({ loading, response, error, refetch, networkStatus }) => ( 44 |
45 | {networkStatus && {networkStatus}} 46 | {loading && Loading...} 47 | {error && {error.response.data}} 48 | {response &&

{response.data.title}

} 49 | 50 |
51 | )} 52 | 53 | ); 54 | ``` 55 | 56 |
57 | 58 | ## Arguments 59 | | Name | Type | Description | 60 | | ---- | ---- | ----------- | 61 | | loading | boolean | Request loading. | 62 | | response | object | The response for a request contains the [Axios response schema](https://github.com/axios/axios#response-schema). | 63 | | error | object | The error for a request. | 64 | | refetch | function | Refetch method for a request. | 65 | | networkStatus | string | Network Connection Status. | 66 | 67 |
68 | 69 | ## Props 70 | 71 | | Name | Type | Default value | Options | Description | 72 | | ---- | ---- |------ | ------------- | ----------- | 73 | | config | object | None | [Axios request config options](https://github.com/axios/axios#request-config) | Config options for making requests. | 74 | | skip | boolean | false | true or false | Disable sending requests when mounting the component. | 75 | 76 |
77 | 78 | ## Read more 79 | - [The easiest way to create HTTP requests in React.js](https://medium.com/@soroushchehresa/the-easiest-way-to-create-http-requests-in-react-js-6fa4b1819b3c) 80 | 81 |
82 | 83 | ## Support 84 | 85 | 86 | 87 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "axios-react", 3 | "version": "2.0.8", 4 | "description": "HTTP client component for React", 5 | "author": "soroushchehresa", 6 | "license": "MIT", 7 | "main": "dist/index.js", 8 | "module": "dist/index.es.js", 9 | "jsnext:main": "dist/index.es.js", 10 | "engines": { 11 | "node": ">=8", 12 | "npm": ">=5" 13 | }, 14 | "scripts": { 15 | "test": "cross-env CI=1 react-scripts-ts test --env=jsdom", 16 | "test:watch": "react-scripts-ts test --env=jsdom", 17 | "build": "rollup -c", 18 | "start": "rollup -c -w", 19 | "prepare": "npm run build", 20 | "predeploy": "cd example && npm install && npm run build", 21 | "deploy": "gh-pages -d example/build" 22 | }, 23 | "dependencies": { 24 | "@types/axios": "^0.14.0", 25 | "@types/is-online": "^8.1.0", 26 | "@types/window-or-global": "^1.0.2", 27 | "axios": "^0.19.2", 28 | "is-online": "^8.4.0", 29 | "window-or-global": "^1.0.1" 30 | }, 31 | "peerDependencies": { 32 | "prop-types": "^15.5.4", 33 | "react": "^15.0.0 || ^16.0.0", 34 | "react-dom": "^15.0.0 || ^16.0.0", 35 | "axios": "^0.19.2", 36 | "is-online": "^8.4.0", 37 | "window-or-global": "^1.0.1" 38 | }, 39 | "devDependencies": { 40 | "@svgr/rollup": "^2.4.1", 41 | "@types/jest": "^23.1.5", 42 | "@types/react": "^16.3.13", 43 | "@types/react-dom": "^16.0.5", 44 | "babel-core": "^6.26.3", 45 | "babel-runtime": "^6.26.0", 46 | "cross-env": "^5.1.4", 47 | "gh-pages": "^1.2.0", 48 | "react": "^16.4.1", 49 | "react-dom": "^16.4.1", 50 | "react-scripts-ts": "^2.16.0", 51 | "rollup": "^0.62.0", 52 | "rollup-plugin-babel": "^3.0.7", 53 | "rollup-plugin-commonjs": "^9.1.3", 54 | "rollup-plugin-node-resolve": "^3.3.0", 55 | "rollup-plugin-peer-deps-external": "^2.2.0", 56 | "rollup-plugin-postcss": "^1.6.2", 57 | "rollup-plugin-typescript2": "^0.17.0", 58 | "rollup-plugin-url": "^1.4.0", 59 | "typescript": "^2.8.3" 60 | }, 61 | "files": [ 62 | "dist" 63 | ], 64 | "repository": { 65 | "type": "git", 66 | "url": "git://github.com/soroushchehresa/axios-react.git" 67 | } 68 | } 69 | -------------------------------------------------------------------------------- /rollup.config.js: -------------------------------------------------------------------------------- 1 | import typescript from 'rollup-plugin-typescript2' 2 | import commonjs from 'rollup-plugin-commonjs' 3 | import external from 'rollup-plugin-peer-deps-external' 4 | // import postcss from 'rollup-plugin-postcss-modules' 5 | import postcss from 'rollup-plugin-postcss' 6 | import resolve from 'rollup-plugin-node-resolve' 7 | import url from 'rollup-plugin-url' 8 | import svgr from '@svgr/rollup' 9 | 10 | import pkg from './package.json' 11 | 12 | export default { 13 | input: 'src/index.tsx', 14 | output: [ 15 | { 16 | file: pkg.main, 17 | format: 'cjs', 18 | exports: 'named', 19 | sourcemap: true 20 | }, 21 | { 22 | file: pkg.module, 23 | format: 'es', 24 | exports: 'named', 25 | sourcemap: true 26 | } 27 | ], 28 | plugins: [ 29 | external(), 30 | postcss({ 31 | modules: true 32 | }), 33 | url(), 34 | svgr(), 35 | resolve(), 36 | typescript({ 37 | rollupCommonJSResolveHack: true, 38 | clean: true 39 | }), 40 | commonjs() 41 | ] 42 | } 43 | -------------------------------------------------------------------------------- /src/index.tsx: -------------------------------------------------------------------------------- 1 | import { useState, useEffect, ReactNode } from 'react'; 2 | import axios, { AxiosResponse, AxiosError, AxiosRequestConfig } from 'axios'; 3 | import isOnline from 'is-online'; 4 | // @ts-ignore 5 | import root from 'window-or-global'; 6 | 7 | interface ChildrenProps { 8 | loading: boolean, 9 | error: AxiosError | null, 10 | response: AxiosResponse | null, 11 | refetch: () => void, 12 | networkStatus: string | null; 13 | } 14 | 15 | interface Props { 16 | children: ((props: ChildrenProps) => ReactNode) | ReactNode; 17 | skip?: boolean, 18 | config: AxiosRequestConfig, 19 | } 20 | 21 | export default ({ children, skip = false, config }: Props) => { 22 | const [loading, setLoading] = useState(false); 23 | const [error, setError] = useState | null>(null); 24 | const [response, setResponse] = useState | null>(null); 25 | const [networkStatus, setNetworkStatus] = useState(null); 26 | 27 | useEffect((): void => { 28 | checkNetworkConnection(); 29 | if (!skip) { 30 | fetch(); 31 | } 32 | }, []); 33 | 34 | const checkNetworkConnection = (): void => { 35 | if ((typeof document != 'undefined') && root && isOnline) { 36 | root.addEventListener('offline', () => { 37 | isOnline({ timeout: 1000 }) 38 | .then(online => { 39 | if (!online) { 40 | setNetworkStatus('offline'); 41 | } 42 | }); 43 | }); 44 | root.addEventListener('online', () => { 45 | isOnline({ timeout: 1000 }) 46 | .then(online => { 47 | if (online) { 48 | setNetworkStatus('online'); 49 | } 50 | }); 51 | }); 52 | isOnline({ timeout: 1000 }) 53 | .then(online => { 54 | if ((online && networkStatus !== 'online') || (!online && networkStatus !== 'offline')) { 55 | setNetworkStatus(online ? 'online' : 'offline'); 56 | } 57 | }); 58 | } 59 | }; 60 | 61 | const fetch = (): void => { 62 | if (config) { 63 | setLoading(true); 64 | axios(config) 65 | .then((response: AxiosResponse) => { 66 | setResponse(response); 67 | setLoading(false); 68 | }) 69 | .catch((error: AxiosError) => { 70 | setError(error); 71 | setLoading(false); 72 | }); 73 | } 74 | }; 75 | 76 | // @ts-ignore 77 | return children({ loading, error, response, refetch: fetch, networkStatus }); 78 | }; 79 | -------------------------------------------------------------------------------- /src/test.ts: -------------------------------------------------------------------------------- 1 | import Request from './index' 2 | 3 | describe('', () => { 4 | it('should render without any error', () => { 5 | expect(Request).toBeTruthy() 6 | }) 7 | }); 8 | -------------------------------------------------------------------------------- /src/typings.d.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Default CSS definition for typescript, 3 | * will be overridden with file-specific definitions by rollup 4 | */ 5 | declare module '*.css' { 6 | const content: { [className: string]: string }; 7 | export default content; 8 | } 9 | 10 | interface SvgrComponent extends React.StatelessComponent> {} 11 | 12 | declare module '*.svg' { 13 | const svgUrl: string; 14 | const svgComponent: SvgrComponent; 15 | export default svgUrl; 16 | export { svgComponent as ReactComponent } 17 | } 18 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "outDir": "build", 4 | "module": "esnext", 5 | "target": "es5", 6 | "lib": ["es6", "dom", "es2016", "es2017"], 7 | "sourceMap": true, 8 | "allowJs": false, 9 | "jsx": "react", 10 | "declaration": true, 11 | "moduleResolution": "node", 12 | "forceConsistentCasingInFileNames": true, 13 | "noImplicitReturns": true, 14 | "noImplicitThis": true, 15 | "noImplicitAny": true, 16 | "strictNullChecks": true, 17 | "suppressImplicitAnyIndexErrors": true, 18 | "noUnusedLocals": true, 19 | "noUnusedParameters": true 20 | }, 21 | "include": ["src"], 22 | "exclude": ["node_modules", "build", "dist", "example", "rollup.config.js"] 23 | } 24 | -------------------------------------------------------------------------------- /tsconfig.test.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "module": "commonjs" 5 | } 6 | } -------------------------------------------------------------------------------- /yarn-error.log: -------------------------------------------------------------------------------- 1 | Arguments: 2 | /usr/local/bin/node /usr/local/Cellar/yarn/1.5.1_1/libexec/bin/yarn.js start 3 | 4 | PATH: 5 | /Users/soroushchehresa/tizen-studio/tools/ide/bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/usr/local/go/bin:/Library/Apple/usr/bin:/Library/Frameworks/Mono.framework/Versions/Current/Commands:/Applications/Wireshark.app/Contents/MacOS:/Users/soroushchehresa/Desktop/react-axios/node_modules/.bin:/usr/local/mysql/bin:/Users/soroushchehresa/ares-cli/bin:/Users/soroushchehresa/android-sdk/tools:/Users/soroushchehresa/android-sdk/tools/bin/:/Users/soroushchehresa/android-sdk/platform-tools:/Users/soroushchehresa/Desktop/react-axios/flutter/bin 6 | 7 | Yarn version: 8 | 1.5.1 9 | 10 | Node version: 11 | 10.16.3 12 | 13 | Platform: 14 | darwin x64 15 | 16 | npm manifest: 17 | { 18 | "name": "axios-react", 19 | "version": "2.0.0", 20 | "description": "HTTP client component for React", 21 | "author": "soroushchehresa", 22 | "license": "MIT", 23 | "repository": { 24 | "type": "git", 25 | "url": "git+https://github.com/soroushchehresa/axios-react.git" 26 | }, 27 | "main": "dist/index.js", 28 | "module": "dist/index.es.js", 29 | "jsnext:main": "dist/index.es.js", 30 | "engines": { 31 | "node": ">=8", 32 | "npm": ">=5" 33 | }, 34 | "scripts": { 35 | "test": "cross-env CI=1 react-scripts-ts test --env=jsdom", 36 | "test:watch": "react-scripts-ts test --env=jsdom", 37 | "build": "rollup -c", 38 | "start": "rollup -c -w", 39 | "prepare": "npm run build", 40 | "predeploy": "cd example && npm install && npm run build", 41 | "deploy": "gh-pages -d example/build" 42 | }, 43 | "dependencies": { 44 | "@types/axios": "^0.14.0", 45 | "@types/is-online": "^8.1.0", 46 | "@types/window-or-global": "^1.0.2", 47 | "axios": "^0.19.2", 48 | "is-online": "^8.4.0", 49 | "window-or-global": "^1.0.1" 50 | }, 51 | "peerDependencies": { 52 | "prop-types": "^15.5.4", 53 | "react": "^15.0.0 || ^16.0.0", 54 | "react-dom": "^15.0.0 || ^16.0.0", 55 | "axios": "^0.19.2", 56 | "is-online": "^8.4.0", 57 | "window-or-global": "^1.0.1" 58 | }, 59 | "devDependencies": { 60 | "@svgr/rollup": "^2.4.1", 61 | "@types/jest": "^23.1.5", 62 | "@types/react": "^16.3.13", 63 | "@types/react-dom": "^16.0.5", 64 | "babel-core": "^6.26.3", 65 | "babel-runtime": "^6.26.0", 66 | "cross-env": "^5.1.4", 67 | "gh-pages": "^1.2.0", 68 | "react": "^16.4.1", 69 | "react-dom": "^16.4.1", 70 | "react-scripts-ts": "^2.16.0", 71 | "rollup": "^0.62.0", 72 | "rollup-plugin-babel": "^3.0.7", 73 | "rollup-plugin-commonjs": "^9.1.3", 74 | "rollup-plugin-node-resolve": "^3.3.0", 75 | "rollup-plugin-peer-deps-external": "^2.2.0", 76 | "rollup-plugin-postcss": "^1.6.2", 77 | "rollup-plugin-typescript2": "^0.17.0", 78 | "rollup-plugin-url": "^1.4.0", 79 | "typescript": "^2.8.3" 80 | }, 81 | "files": [ 82 | "dist" 83 | ], 84 | "publishConfig": { 85 | "registry": "https://npm.pkg.github.com/@soroushchehresa" 86 | } 87 | } 88 | 89 | yarn manifest: 90 | No manifest 91 | 92 | Lockfile: 93 | No lockfile 94 | 95 | Trace: 96 | Error: Command failed. 97 | Exit code: 1 98 | Command: sh 99 | Arguments: -c rollup -c -w 100 | Directory: /Users/soroushchehresa/Desktop/react-axios 101 | Output: 102 | 103 | at ProcessTermError.MessageError (/usr/local/Cellar/yarn/1.5.1_1/libexec/lib/cli.js:186:110) 104 | at new ProcessTermError (/usr/local/Cellar/yarn/1.5.1_1/libexec/lib/cli.js:226:113) 105 | at ChildProcess. (/usr/local/Cellar/yarn/1.5.1_1/libexec/lib/cli.js:30281:17) 106 | at ChildProcess.emit (events.js:198:13) 107 | at maybeClose (internal/child_process.js:982:16) 108 | at Process.ChildProcess._handle.onexit (internal/child_process.js:259:5) 109 | --------------------------------------------------------------------------------