@lsky/http-react
0.0.4 • Public • Published
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
🔨 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 |
Package Sidebar
Install
Weekly Downloads