Quick-Loader

A quick and easy wrapper for retrieving information async while displaying a loader

Quick

Installation

npm install @scrumble-nl/react-quick-loader

or

yarn add @scrumble-nl/react-quick-loader

Usage

This package makes a distinction by two types of usage.

1. Retrieving data from an url
2. Passing through data manually (useful if you want one api call and multiple loaders)

Both wil pass the data to the data property to all of their children. The actual implementations are as followed:

Url variant

1. Import QuickLoader
2. Implement the loader by giving it a color, url and at least one child component.
3. (optional) add errorCallback for handling the potential ajax errors

import React from 'react';
import QuickLoader from '@scrumble-nl/react-quick-loader'; // Step 1

export default class MyComponent extends React.Component<{}, {}> {
    render = (): JSX.Element => {
        return (
            <QuickLoader color="#ff9933" url='/api/user'> // Step 2
                <MyComponent/>
            </Quickloader>     
        )
    }
}

The following options can be used for customization:

| Name | Type | Required | Description | Default | |--------------|:----------------------------------------------------------------------------------------:|:----------:|:-------------------------------------| -------- | | color | string | true | The color for the loader | | | url | string | true | The url used to retrieve data | | type | 'blank', 'balls', 'bars', 'bubbles', 'cubes', 'cylon', 'spin', 'spinningBubbles', 'spokes' | false | The loader type | bars | | errorCallback | (error: any) => void | false | The custom callback for handling the error message | undefined

Data variant

The actual implementation is as follows:

1. Import QuickLoader
2. Implement the loader by giving it a color, data and at least one child component
   1. As long as the data property is undefined it will show a loader

import React from 'react';
import axios from 'axios';
import QuickLoader from '@scrumble-nl/react-quick-loader'; // Step 1

export default class MyComponent extends React.Component<{}, {}> {
    
    state = {
        userOne: undefined,
        userTwo: undefined,
    };
    
    componentDidMount = (): void => {
        axios.get('/api/user')
            .then(response => {
                this.setState({
                    userOne: response.data[0],
                    userTwo: response.data[1],
                });
            })
            .catch(error => {
                console.log(':(');
            });
    };

    render = (): JSX.Element => {
        return (
            <>
                <QuickLoader color="#ff9933" data={this.state.userOne}> // Step 2 (step 3.1)
                    <MyComponent/>
                </Quickloader>
                <QuickLoader color="#ff9933" data={this.state.userTwo}> // Step 2 (step 3.1)
                    <MyComponent/>
                </Quickloader>
            </>
        )
    }
}

The following options can be used for customization:

| Name | Type | Required | Description | Default | |--------------|:----------------------------------------------------------------------------------------:|:----------:|:-------------------------------------| -------- | | color | string | true | The color for the loader | | | data | any | true | The data passed to the children | undefined| | type | 'blank', 'balls', 'bars', 'bubbles', 'cubes', 'cylon', 'spin', 'spinningBubbles', 'spokes' | false | The loader type | bars |

Additional customization

Next to that you can override the classes .spinner-container and .react-loading to change the look of the loader.

Roadmap

• [x] Packagize component
• [ ] Improve styling customizability
• [ ] Automated testing implementation
• [ ] Switch from interfaces to types
• [ ] Improve scss usage

Contributing

If you would like to see additions/changes to this package you are always welcome to add some code or improve it.

Scrumble

This product has been originally developed by Scrumble for internal use. As we have been using lots of open source packages we wanted to give back to the community. We hope this helps you getting forward as much as other people helped us!