@am0nshi/react-preloaders
v3.0.3
Published
🌌Package for adding preloaders to your React apps
Downloads
4
Maintainers
Readme
React Preloaders
vamosgs.github.io/react-preloaders
Setup
Install it:
npm install react-preloaders --save
or
yarn add react-preloaders --save
Get Started
find full preloaders list here.
Simplest way
import React from 'react';
import { Lines } from 'react-preloaders';
function App() {
return (
<React.Fragment>
<YourApp />
<Lines />
</React.Fragment>
);
}
Your components as preloader
Here is example how you can use your components as prelaoder:
import React from 'react';
import { CustomPreloader } from 'react-preloaders';
function App() {
return (
<React.Fragment>
<YourApp />
<CustomPreloader>
YOUR CUSTOM PRELOADER COMPONENT
</CustomPreloader>
</React.Fragment>
);
}
Properties (Props)
color (String)
Color (hex, rgb, rgba) defines preloaders main color.
import { Lines } from 'react-preloaders';
<Lines color={'#f7f7f7'} />;
<Lines color={'rgb(158, 38, 102)'} />;
background (String)
Background can be just color (hex, rgb), gradient or blured. For just colored background pass color(hex, rgb, rgba).
import { Lines } from 'react-preloaders';
<Lines background="#f7f7f7" />;
For gradient background pass your gradient.
You can generate gradients here.
import { Lines } from 'react-preloaders';
<Lines background="linear-gradient(180deg, #f95759 0%, #a62022 100%)" />;
For blured background just pass blur.(it's now in beta)
import { Lines } from 'react-preloaders';
<Lines background="blur" />;
time (Number)
Time defines how long you want show preloader after page loaded.
import { Lines } from 'react-preloaders';
<Lines time={1800} />;
If your are using customLoading and you don't want play preloader if your loading status false you need to pass time 0
import { Lines } from 'react-preloaders';
<Lines customLoading={loading} time={0} />;
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.
import { Lines } from 'react-preloaders';
<Lines animation="slide" />;
<Lines animation="slide-down" />;
<Lines animation="slide-right" />;
<Lines animation="slide-left" />;
customLoading (Boolean)
If in your app somthing loads async you can use preloaders too. For customLoading you need to pass your loading status.
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 (
<React.Fragment>
<YourApp />
<Lines customLoading={loading} />
</React.Fragment>
);
}
}
Example with hooks
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 (
<React.Fragment>
<YourApp />
<Lines customLoading={loading} />
</React.Fragment>
);
}
CSS loading (under v3.x.x) methods for old versions
Packages you need
style-loader css-loader
more if you want to extract css you need
Extract ( webpack 3.x )
extract-text-webpack-plugin
Extract ( webpack 4.x )
mini-css-extract-plugin
Add this to your webpack if you don't have css loader yet
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
}
Extract ( webpack 3.x )
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 )
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'
]
}
]
}
};