@lsky/http-react v0.0.4

✨ 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

Get

Post

WebSocket