React Toolbox


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

Table of content

- Usage
- useInterval
- Async Data
- LocationProvider
- useMatchMediaQuery
- useDebounce
- useIsMounted
- Build & Publish
- Information

Usage

First, you have to install the package:

``bash
npm install @aboutbits/react-toolbox
`

Second, you can make use of the different tools.

$3

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.

`tsx
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

Countdown: {step}

`tsx
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()
const [error, setError] = useState()

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

return (
data={data}
error={error}
renderLoading={

`tsx
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 (
data={data}
error={error}
renderLoading={'Loading'}
renderSuccess={'Success'}
renderError={'Error'}
/>
)
}
`

$3

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

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

const MyApp = () => {
return (

{children}

)
}
`

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

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

const MyComponent = () => {
const { location } = useContext(LocationContext)

return location ? (


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.

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

const TestComponent = () => {
const matches = useMatchMediaQuery('(min-width : 500px)')
if (matches) return

`tsx
export default function TestComponent() {
const [value, setValue] = useState('')
const debouncedValue = useDebounce(value, 500)

const handleChange = (event: ChangeEvent) => {
setValue(event.target.value)
}

// Fetch API (optional)
useEffect(() => {
// Do fetch here...
// Triggers when "debouncedValue" changes
}, [debouncedValue])

return (


`tsx
const delay = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms))

function Child() {
const [data, setData] = useState('loading')
const isMounted = useIsMounted()

// simulate an api call and update state
useEffect(() => {
void delay(3000).then(() => {
if (isMounted()) {
setData('OK')
}
})
}, [isMounted])

return

{data}

{isVisible && }

)
}
`

Build & Publish

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

`bash
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.

$3

For support, please contact info@aboutbits.it.

$3

- Martin Malfertheiner
- Alex Lanz
- All Contributors

$3

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