Axios Hook Library

Table of contents

• About
• Playground
• Technologies
• Dependencies
• Installation
• Usage & Examples
  • POST
  • GET
  • PATCH/PUT
  • DELETE
• TODO
• License

About

This project was developed to help our team to minimize the code in our projects.

Playground

Click here to view the project demo and made some tests requests.

Technologies

• React
• TypeScript

Dependencies

• Node
• Create React Lib
• MicroBundle CRL
• Axios
• Pretier
• Eslint
• Jest
• CrossEnv

Installation

To run the code on your machine, follow the steps below.

git clone git@github.com:nicklima/axios-hook-library.git

After cloning the project, we need to install all the dependencies.

# npm
npm install

# yarn
yarn install

Local development is broken into two parts (ideally using two tabs). First, run rollup to watch your src/ module and automatically recompile it into dist/ whenever you make changes.

# runs rollup with watch flag
# npm
npm start

# yarn
yarn start

The second part will be running the example/ create-react-app that's linked to the local version of your module.

We have to prepare the test environment to view the package that is being executed. Open another terminal window and run the following commands:

# (in another tab)
# this command will chage to example directory and install modules

#npm
npm run example

#yarn
yarn run example

And finally we can run the project and test.

# (on the same tab as the previous command)
# runs create-react-app dev server

#npm
npm run preview

#yarn
yarn run preview

Now, anytime you make a change to your library in src/ or to the example app's example/src, create-react-app will live-reload your local dev server so you can iterate on your component in real-time.

Usage & Examples

Here are some examples of how to use Axios Hook Library. First we will need to install the package

# npm
npm install axios-hook-library

# yarn
yarn add axios-hook-library

Usage

Once installed just import it into your JSX file as in the example below

import React from 'react'
import useAxiosHook from 'axios-hook-library'

import logo from './logo.svg'
import './App.css'

const App = () => {
  const { isLoading, isSuccess, hasError, rspData, fetchData } = useAxiosHook()

  return (
    <main>
      <div className='App'>
        <header className='App-header'>
          <img src={logo} className='App-logo' alt='logo' />
        </header>
      </div>
    </main>
  )
}

export default App

In the code below we have some useful information on how to use the library

//If you want to reset the isSuccess state, pass a time parameter on the hook call.
//Ex: useAxiosHook(3000)
const { isLoading, isSuccess, hasError, rspData, fetchData } = useAxiosHook()

//Function fetchData
//Params: baseURL, method ("GET" | "POST" | "PUT" | "PATCH" | "DELETE"), data
fetchData('https://jsonplaceholder.typicode.com/posts', 'GET')

//React States
//isLoading(boolean), isSuccess(boolean), hasError(boolean), rspData(object)
isLoading && <p>Loading</p>
isSuccess && <p>Sent</p>
hasError && <p>Error</p>
rspData && <pre>{JSON.stringify(rspData, null, 2)}</pre>

Examples

Check below how to make requests with the Axios Hook Library

POST

import React from 'react'
import useAxiosHook from 'axios-hook-library'

import logo from './logo.svg'
import './App.css'

const App = () => {
  const { isLoading, isSuccess, hasError, fetchData } = useAxiosHook()

  const formData = {
    title: 'Axios Hook Library',
    body: 'Lorem ipsum dolor sit amet consectetur adipisicing elit.',
    userId: 1,
  }

  return (
    <main>
      <div className='App'>
        <header className='App-header'>
          <img src={logo} className='App-logo' alt='logo' />
          <button
            onClick={() =>
              fetchData(
                'https://jsonplaceholder.typicode.com/posts',
                'POST',
                formData
              )
            }
          >
            Send Request
          </button>
        </header>
        {isLoading && <p>Sending Data...</p>}
        {hasError && <p>Some error occurred, try again.</p>}
        {isSuccess && <p>Data Sent!</p>}
      </div>
    </main>
  )
}

export default App

GET

import React from 'react'
import useAxiosHook from 'axios-hook-library'

import logo from './logo.svg'
import './App.css'

const App = () => {
  const { isLoading, hasError, rspData, fetchData } = useAxiosHook()

  //Function to check if the object is empty
  const checkData = () => {
    if (Object.keys(rspData).length !== 0) {
      return true
    }
    return false
  }

  return (
    <main>
      <div className='App'>
        <header className='App-header'>
          <img src={logo} className='App-logo' alt='logo' />
          <button
            onClick={() =>
              fetchData(
                'https://jsonplaceholder.typicode.com/posts/1/comments',
                'GET'
              )
            }
          >
            Get Posts
          </button>
        </header>
        <div className='comments'>
          {isLoading && <p>Loading Content...</p>}
          {hasError && <p>Some error occurred, try again.</p>}
          {checkData() &&
            rspData.data.map((comment: any) => {
              return (
                <div key={comment.id}>
                  <h1>{comment.title}</h1>
                  <p>{comment.body}</p>
                </div>
              )
            })}
        </div>
      </div>
    </main>
  )
}

export default App

PATCH/PUT

import React from 'react'
import useAxiosHook from 'axios-hook-library'

import logo from './logo.svg'
import './App.css'

const App = () => {
  const { isLoading, isSuccess, hasError, fetchData } = useAxiosHook()

  const formData = {
    title: 'Axios Hook Library',
    userId: 1,
  }

  return (
    <main>
      <div className='App'>
        <header className='App-header'>
          <img src={logo} className='App-logo' alt='logo' />
          <button
            onClick={() =>
              fetchData(
                'https://jsonplaceholder.typicode.com/posts/1',
                'PATCH',
                formData
              )
            }
          >
            Send Request
          </button>
        </header>
        {isLoading && <p>Sending Data...</p>}
        {hasError && <p>Some error occurred, try again.</p>}
        {isSuccess && <p>Post Updated!</p>}
      </div>
    </main>
  )
}

export default App

DELETE

import React from 'react'
import useAxiosHook from 'axios-hook-library'

import logo from './logo.svg'
import './App.css'

const App = () => {
  const { isLoading, isSuccess, hasError, fetchData } = useAxiosHook()

  return (
    <main>
      <div className='App'>
        <header className='App-header'>
          <img src={logo} className='App-logo' alt='logo' />
          <button
            onClick={() =>
              fetchData(
                'https://jsonplaceholder.typicode.com/posts/1',
                'DELETE'
              )
            }
          >
            Delete Post
          </button>
        </header>
        {isLoading && <p>Trying to delete...</p>}
        {hasError && <p>Some error occurred, try again.</p>}
        {isSuccess && <p>Deleted with success!</p>}
      </div>
    </main>
  )
}

export default App

TODO

Here are some features that i want to add in the package. If you want to help, send me a PR

• Create a DOC page;
• Create Unitary tests to the React Hook function;
• Add Husky to the project
• Check and fix all types;
• Add Headers param in fetchData function;
• Add Headers Fields to Input headers options on Playground/Preview URL;
• Check the code and dependencies looking for Security Issues;

License

MIT © Nick Lima