README

React Toolbox

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

Table of content

Usage
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'} />
    );
}

LocationProvider

This part includes a React context that fetches the geolocation at a given interval.

import { LocationProvider } from '@aboutbits/react-toolbox'

const MyApp = () => {
  
  return (
    <LocationProvider highAccuracy={true} delay={20000}>
      {children}
    </LocationProvider>
  )
}

The context provider takes two props:

highAccuracy: defines if the location should be fetched with high accuracy. Read more on the Geolocation API doc.
delay: the delay in milliseconds between each fetch

import { useContext } from 'react'
import { LocationContext } from '@aboutbits/react-toolbox'

const MyComponent = () => {
  const { location } = useContext(LocationContext)
  
  return location 
      ? <div>Your location is: {location.coords.latitude}, {location.coords.longitude}</div>
      : <div>Unable to get your location</div>
}

useMatchMediaQuery

This hook is based on the window.matchQuery API and can be used to find out if a certain media query matches the current window.

import { useMatchMediaQuery } from '@aboutbits/react-toolbox'

const TestComponent = () => {
  const matches = useMatchMediaQuery('(min-width : 500px)')
  if (matches) return <div>visible</div>
  return null
}

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

License

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

Usage no npm install needed!