Harbor-js v1

npm install -S harbor-js

Example setup for index.js (create-react-app)

Harbor wraps your app in react-redux Provider. Pass your @reduxjs/toolkit slices as reducer.

import React from 'react';
import ReactDOM from 'react-dom';
import reducer from './app/reducer';
import App from './App';

import { Harbor } from 'harbor';

const options = {
    global: {
        "contentSize": [
            {
                "width": 0.9,
                "height": 1
            },
            {
                "width": 0.8,
                "height": 1
            }
        ],
        "maxContentWidth": 1200,
        "bg": "white",
        "fadeInTime": 0.3,
        "loadingTimeout": 10
    },
    theme: {},
    reducer
};

ReactDOM.render(
    <Harbor options={options}>
        <App/>
    </Harbor>,
    document.getElementById('root')
);

Further setup

Index.html theme color, fonts, description, title manifest.json name, theme color, bg color

Further exports

Services

configService getGlobal(), getTheme(), withBreakpoint(value), withTheme(value) requestService baseUrl, setBaseUrl(url), get(url), post(url, data) trackingSerivce startProcessTimer(name), stopProcessTimer(name)

Components

Page width, height, minHeight, bg, fadeInTime, loadingIcon, css Image width, height, src, srcRatio, targetRatio, awaitLoad, priority, className, css Header / Footer height, fixed = true, bg, css FlyOverBox height, maxHeight ZoomBox auto, doZoom, factor, time

Hooks

useI18n

Utils

isObject isEmail deepCompare mergeObjects favors first input, concatenates arrays