React Loader

This is react loader component. It can be applied to react projects. Library uses react, react hooks, typescript, css written in SASS preprocessor.

Developing bundler is webpack.

Build production build made as simple tsc compilation with asset files copies provided

Requirements

• nodejs v10 +
• npm v6.9.0 +

Installation:

Installing dependencies

npm install

Build production library files

npm run build

##Development

Running dev server in standalone mode

npm run start

Running dev mode through bundler in other project. Project should be linked by npm.

npm run build:dev

* build dev emmits files into dist/esm/Loader

Running tests

npm run test

####Codestyle

We are in consonance with standardjs.

Validation codestyle:

npm run codestyle-check-typescript

Automatic fix:

npm run codestyle-typescript-fix

####CI (bitbucket pipelines)

Checks codestyles and run tests

##Compilation summary | | npm start - (standalone dev) | npm run build:dev (imported as esm in higher bundler) | npm run build (production build) |---|---|---|---| |key dist files|none|dist/esm/Loader.js|dist/esm/Loader.js |css extraction|no| dist/esm/Loader.css| dist/esm/Loader.css |files extraction|no|no (copied)|no (copied) ##App configuration

React Loader requires four props:

• loadingTimeout - type: number (set time to display error message in milliseconds)
• style - type: object (set loader's background and z-index)
  • backgroundImagePath - type: string (import image with e6 modules and pass result of import as path)
  • zIndexValue - type: number (set CSS z-index property)
• loaderSwitcher - type: boolean (switch on/off component )
• errorMessage - type: string (text of error message)

Example :

import Loader from '@dac-software/react-loader'
import bg from './Background/bg-image.jpg'

<Loader 
    loadingTimeout={5000}
    style={{backgroundImagePath: bg, zIndex: 999}}
     loaderSwitcher={true}
     errorMessage='error'
 />

NPM publishing:

1. Optional update typings in Loader.d.ts file
2. Increase version in package.json
3. Npm login with proper username and password

   npm login

4. Npm publish (command will trigger prepare npm method which should build files to dist directory)

   npm publish --access=public