@aboutbits/react-toolbox

React Toolbox

This package includes different tools that support you with common tasks.

Table of content

• Usage
  • useInterval
  • Async Data
• Build & Publish
• Information

Usage

First, you have to install the package:

npm install @aboutbits/react-toolbox

Second, you can make use of the different tools.

useInterval

The useInterval hook calls a function at specified intervals. The code of this hook is taken from Dan Abramov's blog post.

The hook takes two parameters:

• callback: The callback function that should be executed.
• delay: The delay in milliseconds or null, if the interval should be paused.

import React, { useState } from 'react'
import { useInterval } from '@aboutbits/react-toolbox'

const MyCommponent = () => {
  const [step, setStep] = useState(10)
  
  useInterval(() => {
    setStep(step - 1)
  }, step === 0 ? null : 1000)

  return <p>Countdown: {step}</p>
}

Async Data

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

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

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>}
            renderSuccess={(data) => <div>{data.greeting}</div>}
            renderError={(error) => <div>{error.message}</div>} />
    );
}

And using SWR:

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

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}
            renderLoading={'Loading'}
            renderSuccess={'Success'}
            renderError={'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 [e-mail].

Credits

• Martin Malfertheiner
• Alex Lanz
• All Contributors

License

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