harbor-js

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