https://github.com/vamosgs/react-preloaders
🌌Package for adding preloaders to your React apps
https://github.com/vamosgs/react-preloaders
css-animations preloaders react-preloaders reactjs
Last synced: about 1 year ago
JSON representation
🌌Package for adding preloaders to your React apps
- Host: GitHub
- URL: https://github.com/vamosgs/react-preloaders
- Owner: VamOSGS
- License: mit
- Created: 2017-09-28T01:07:51.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2023-01-04T00:51:55.000Z (over 3 years ago)
- Last Synced: 2024-04-14T12:52:11.657Z (about 2 years ago)
- Topics: css-animations, preloaders, react-preloaders, reactjs
- Language: JavaScript
- Homepage: https://vamosgs.github.io/react-preloaders/
- Size: 3.58 MB
- Stars: 76
- Watchers: 3
- Forks: 24
- Open Issues: 68
-
Metadata Files:
- Readme: README.MD
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
## React Preloaders
[](https://www.npmjs.org/package/react-preloaders)
#### [vamosgs.github.io/react-preloaders](https://vamosgs.github.io/react-preloaders/)
### Setup
Install it:
```bash
npm install react-preloaders --save
```
or
```bash
yarn add react-preloaders --save
```
### Get Started
#### find full preloaders list [here](https://vamosgs.github.io/react-preloaders/).
### Simplest way
```jsx
import React from 'react';
import { Lines } from 'react-preloaders';
function App() {
return (
);
}
```
### Your components as preloader
Here is example how you can use your components as prelaoder:
```jsx
import React from 'react';
import { CustomPreloader } from 'react-preloaders';
function App() {
return (
YOUR CUSTOM PRELOADER COMPONENT
);
}
```
### Properties (Props)
Prop
type
Default value
color
String(hex, rgb,...)
#2D2D2D
background
String(blur, gradient...)
#F7F7F7
time
Number(Milliseconds)
1300ms
animation
String(fade, slide...)
fade
customLoading
Boolean
undefined
## color (String)
Color (hex, rgb, rgba) defines preloaders main color.
```jsx
import { Lines } from 'react-preloaders';
;
;
```
## background (String)
Background can be just color (hex, rgb), gradient or blured.
For just colored background pass color(hex, rgb, rgba).
```jsx
import { Lines } from 'react-preloaders';
;
```
For gradient background pass your gradient.
You can generate gradients [here](https://cssgradient.io/).
```jsx
import { Lines } from 'react-preloaders';
;
```
For blured background just pass blur.(it's now in beta)
```jsx
import { Lines } from 'react-preloaders';
;
```
## time (Number)
Time defines how long you want show preloader after page loaded.
```jsx
import { Lines } from 'react-preloaders';
;
```
### If your are using [customLoading](#customLoading) and you don't want play preloader if your loading status false you need to pass time 0
```jsx
import { Lines } from 'react-preloaders';
;
```
## animation (String)
Now you can choose preloader closing animation, in this version available just 2 animations fade and slide.
By default preloader will close with fade animation.
#### For slide animation you can choose direction.
```jsx
import { Lines } from 'react-preloaders';
;
;
;
;
```
## customLoading (Boolean)
If in your app somthing loads async you can use preloaders too. For customLoading you need to pass your loading status.
```jsx
import React, { Component } from 'react';
import { Lines } from 'react-preloaders';
class App {
constructor() {
state = {
loading: true
};
}
componentDidMount() {
fetch('https://jsonplaceholder.typicode.com/todos/1')
.then(response => response.json())
.then(json => {
setState({ loading: false });
})
.catch(err => {
setState({ loading: false });
});
}
render() {
return (
);
}
}
```
### Example with hooks
```jsx
import React, { useState, useEffect } from 'react';
import { Lines } from 'react-preloaders';
function App() {
const [loading, setLoading] = useState(true);
useEffect(() => {
fetch('https://jsonplaceholder.typicode.com/todos/1')
.then(response => response.json())
.then(json => {
setLoading(false);
})
.catch(err => {
setLoading(false);
});
}, []);
return (
);
}
```
#### CSS loading (under v3.x.x) methods for old versions
Packages you need
```bash
style-loader css-loader
```
more if you want to extract css you need
#### Extract ( webpack 3.x )
```bash
extract-text-webpack-plugin
```
#### Extract ( webpack 4.x )
```bash
mini-css-extract-plugin
```
#### Add this to your webpack if you don't have css loader yet
```js
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
}
```
#### Extract ( webpack 3.x )
```js
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const extractCSS = new ExtractTextPlugin('style.[hash].css');
module.exports = {
plugins: [extractCSS],
module: {
rules: [
{
test: /\.css$/,
use: extractCSS.extract(['css-loader', 'postcss-loader'])
}
]
}
};
```
#### Extract ( webpack 4.x )
```js
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
plugins: [
new MiniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output
// both options are optional
filename: '[name].css',
chunkFilename: '[id].css'
})
],
module: {
rules: [
{
test: /\.css$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
// you can specify a publicPath here
// by default it use publicPath in webpackOptions.output
publicPath: '../'
}
},
'css-loader'
]
}
]
}
};
```