React HOC

Configuration

Configuration is optional

import lang from './lang';
import csp from './csp';

let configuration = {
    hoc: ['feedback', 'trans', 'csp'], // support 3 hoc
    i18n: lang.i18n, // 'feedback' hoc need to translate key, provide an i18n instance that used in app
    csp: csp // 'csp' hoc need to communicate with others, provide a csp instance that used by others
};

Create Instance

import hocLib from 'nbrc-hoc';

let hoc = hocLib.createInstance(configuration);

// Configuration is optional
// createInstance with no configuration
// box message will not be translated

let hoc = hocLib.createInstance();

Example 1

Status control, detection, feedback

// React Function Component

function AComponent{

    function getRes1() {
        props.fb.loading();
        const id = setInterval(() => {
            // open success box, set props.fb.isLoading = false and props.isSuccess = true
            props.fb.success('welcome');
            clearInterval(id);
        }, 3000);
    }

    function getRes2() {
        props.fb.loadings('a');
        const id = setInterval(() => {
            // no box, only set props.fb.isLoadins.a = false and props.fb.isSuccesses.a = true
            props.fb.successes('a');
            // open success box, set props.fb.isLoadings.a = false and props.isSuccesses.a = true
            props.fb.successes('a', 'welcome');
            // open error box, set props.fb.isLoadings.a = false and props.isErrors.a = true
            props.fb.errors('a', 'welcome');
            clearInterval(id);
        }, 3000);
    }

    function getRes3() {
        props.fb.loadings('b');
        const id = setInterval(() => {
            // open success box
            // translate key 'welcome' with interpolation
            // box will automaticlly close after 3 seconds
            props.fb.successes('b', 'welcome', { idx: 'interpolation' }, 3);
            clearInterval(id);
        }, 3000);
    }

    return <div>
        <Button loading={props.fb.isLoading} onClick={getRes1}>Get Resource 1</Button>
        <Button loading={props.fb.isLoadings.a} onClick={getRes2}>Get Resource 2</Button>
        <Button loading={props.fb.isLoadings.b} onClick={getRes3}>Get Resource 3</Button>
    </div>
}

export default hoc(AComponent)