@dac-software/react-loader v1.0.0
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
```bash
npm login
```
4) Npm publish (command will trigger prepare npm method which should build files to dist directory)
```bash
npm publish --access=public
```