@aboutbits/react-toolbox
    TypeScript icon, indicating that this package has built-in type declarations

    0.1.2 • Public • Published

    React Toolbox

    npm package license

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

    Table of content

    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.

    Install

    npm i @aboutbits/react-toolbox

    DownloadsWeekly Downloads

    61

    Version

    0.1.2

    License

    MIT

    Unpacked Size

    31.8 kB

    Total Files

    43

    Last publish

    Collaborators

    • aboutbits_tech