@aboutbits/react-async-data v0.0.7

React Async Data

This package includes a utility Component, that can be used to render loading, success and error views based on async state.

Table of content

• Usage
• Build & Publish
• Information

Usage

First, you have to install the package:

npm install @aboutbits/react-async-data

Example

import React, { useEffect } from 'react'
import { AsyncView } from '@aboutbits/react-async-data'

type Data = {
    greeting: string
}

type Error = {
    message: string
}

const MyCommponent = () => {
    const [data, setData] = useState<Data | undefined>()
    const [error, setError] = useState<Error | undefined>()

    useEffect(() => {
        fetch('https://jsonplaceholder.typicode.com/todos/1')
            .then(response => setData(response.json()))
            .catch(error => setError(error))
    })

    return (
        <AsyncView
            data={data}
            error={error}
            renderLoading={<div>Loading</div>}
            success={(data) => <div>{data.greeting}</div>}
            error={(error) => <div>{error.message}</div>} />
    );
}

Usage with SWR

import React, { useEffect } from 'react'
import { useSWR } from 'swr'
import { AsyncView } from '@aboutbits/react-async-data'

type Data = {
    greeting: string
}

type Error = {
    message: string
}

const MyCommponent = () => {
    const { data, error } = useSWR('https://jsonplaceholder.typicode.com/todos/1')
    
    return (
        <AsyncView
            data={data}
            error={error}
            loading={'Loading'}
            success={'Success'}
            error={'Error'} />
    );
}

Build & Publish

To publish the package commit all changes and push them to main. Then run one of the following commands locally:

npm version patch
npm version minor
npm version major

Information

About Bits is a company based in South Tyrol, Italy. You can find more information about us on our website.

Support

For support, please contact info@aboutbits.it.

Credits

• Simon Planinschek
• Alex Lanz
• Martin Malfertheiner
• All Contributors

License

The MIT License (MIT). Please see the license file for more information.