@lsky/http-react

Http React

A http React Component

✨ 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>
    )
  }
}

🍰 Components & PropTypes

HttpReact

attr	type	default value	desc
method	string	null	http method
url	string	null	url
debounce	number	100	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	100	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	100	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