✨ Features

• Extends Axios
• React Component
• Support <HttpProvider />

📦 installing

npm

$ npm install @lsky/http-react --save

yarn

$ yarn add @lsky/http-react

And you need to install Axios and React

$ yarn add react axios

🔨 Example

import React from 'react'
import HttpReact, { Post, Get, HttpProvider } from '@lsky/http-react'

class Index extends React.Component {
  render() {
    return (
      <div>
        <HttpReact
          url="/test/test"
          data={{ param: 'abc' }}
          method="post"
          onResponse={(response) => { console.log('response: ', response) }}
          onError={(error) => console.log('error: ', error)}
          onLoading={(loading) => console.log('isLoading: ', loading)}
        >
          http react
        </HttpReact>
        <Post
          url="/test/test"
          data={{ param: 'abc' }}
          onResponse={(response) => { console.log('post: ', response) }}
        >
          post http react
        </Post>
        <Get
          url="/test/test"
          params={{ param: 'abc' }}
          onResponse={(response) => { console.log('get: ', response) }}
        >
          post http react
        </Get>

        <HttpProvider baseURL={"http://localhost:3000"}>
          <Post
            url="/test/test"
            data={{ path: '/test/test' }}
            onResponse={(response) => { console.log('post: ', response) }}
          >
            post http react
          </Post>
        </HttpProvider>
        <Get 
          url={get.url} 
          onResponse={(response) => { console.log('get: ', response) }} 
          loading={<div>loading...</div>} 
        />
      </div>
    )
  }
}

⚡️ WebSocket

import React from 'react'
import { WebSocket } from '@lsky/http-react'

const sendMsg = (socket) => {
  socket.send('message test')
}
const onMessage = (messageEvent) => {
  console.log('message: ', messageEvent)
}

class Index extends React.PureComponent {
  render() {
    return (
      <WebSocket
        url="ws://localhost:4000"
        onMessage={onMessage}
      >
        {({ socket }) => <div><button onClick={() => sendMsg(socket)}>send msg</button></div>}
      </WebSocket>
    )
  }
}

🍰 Components & PropTypes

HttpReact

| attr | type | default value | desc | | --- | --- | --- | --- | | method | string | null | http method | | url | string | null | url | | debounce | number | 500 | debounce | | data | string | plain object | URLSearchParams | null | data is the data to be sent as the request body; Only applicable for request methods 'PUT', 'POST', and 'PATCH' | | params | plain object | null | params are the URL parameters to be sent with the request | | children | React.ReactChild | null | react node | | loading | React.ReactNode | boolean | null | show in loading | | onResponse | (response) => void | null | onResponse | | onError | (error) => void | null | onError | | onLoading | (isLoading: boolean) => void | null | onLoading |

Get

| attr | type | default value | desc | | --- | --- | --- | --- | | url | string | null | url | | debounce | number | 500 | debounce | | params | plain object | null | params are the URL parameters to be sent with the request | | children | React.ReactChild | null | react node | | loading | React.ReactNode | boolean | null | show in loading | | onResponse | (response) => void | null | onResponse | | onError | (error) => void | null | onError | | onLoading | (isLoading: boolean) => void | null | onLoading |

Post

| attr | type | default value | desc | | --- | --- | --- | --- | | url | string | null | url | | debounce | number | 500 | debounce | | data | string | plain object | URLSearchParams | null | data is the data to be sent as the request body; Only applicable for request methods 'PUT', 'POST', and 'PATCH' | | params | plain object | null | params are the URL parameters to be sent with the request | | children | React.ReactChild | null | react node | | loading | React.ReactNode | boolean | null | show in loading | | onResponse | (response) => void | null | onResponse | | onError | (error) => void | null | onError | | onLoading | (isLoading: boolean) => void | null | onLoading |

WebSocket

| attr | type | default value | desc | | --- | --- | --- | --- | | url | string | null | websocket url | | timeout | number | 1000 | restart time | | max | number | 10 | restart count | | children | React.ReactNode | ({socket}) => React.ReactNode | null | react node | | onOpen | (event) => void | null | socket open callback | | onMessage | (messageEvent) => void | null | recieve message callback | | onClose | (closeEvent) => void | null | socket close callback | | onError | (event) => void | null | socket error callback |