JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 11
  • Score
    100M100P100Q45232F
  • License MIT

React HTTP Client specially for JSON Apis

Package Exports

  • react-json-api-client
  • react-json-api-client/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-json-api-client) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-json-api-client

npm version npm NPM

Simple package to execute api requests, Right now the package is in beta phase

Installation

yarn add react-json-api-client
# or
npm i -s react-json-api-client

Usage

App.jsx

<ApiClient
    config={{
        endpoints: {
            auth: '/api/v1/my-auth-endpoint',
            nested: {
                foo: '/api/v1/bar'
                withReplace: '/api/v1/user/🆔'
            },
            
        },
        server: 'http://my-server.test'
    }}
>
    {... my app components}

</ApiClient>

MyComponent.jsx

import { useGet, usePost } from 'react-json-api-client'

const MyComponent: React.FC = () => {
    // First position = Promise to execute the request
    // Second position = Boolean with the loading state
    const [sendPost, sending] = usePost('nested.foo')
    // The usePatch, usePut, useDelete works the same way

    // const [sendPost, loading] = usePatch('auth')
    // data: The response data when the request is done
    // loading, boolean with the loading state
    const {data, loading} = useGet('nested.withReplace', {
        id: 2
    })
    
    // useGet can be lazy, just send the lazy flag after the configs
    const [sendRequest, loading] = useGet('path', {}, true)

    const handleAuth = async () => {
        try {
            const response = await sendPost({
                // The body
                data: {
                    email: 'my-email@gmail.com',
                    password: '1234567'
                }   
            })
            console.log(response.data)
        } catch (e) {
            // handle your error
        }
    }
    return (
        <>
        </>
    )
}

Todo V1.0.0

  • Api client context
  • Api hooks: useGet, usePost, usePatch, useDelete, usePut
  • Replace params in url
  • Api configuration hook
  • Allow render Requests log
  • Allow authentication (JWT)

Todo V1.2.0

  • Support for filters in url following the JSON Spect
  • Support for related records in url following the JSON Spect

Todo Version 2.0.0

  • Add JSON API schemas