Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/team-griffin/redux-page-loader
https://github.com/team-griffin/redux-page-loader
loading react redux
Last synced: about 1 month ago
JSON representation
- Host: GitHub
- URL: https://github.com/team-griffin/redux-page-loader
- Owner: team-griffin
- License: mit
- Created: 2017-03-24T13:11:04.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2022-12-10T20:28:37.000Z (about 2 years ago)
- Last Synced: 2024-11-09T12:32:32.739Z (about 2 months ago)
- Topics: loading, react, redux
- Language: JavaScript
- Size: 2.66 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 17
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# redux-page-loader
```sh
npm install --save @team-griffin/redux-page-loader
```
```sh
yarn add @team-griffin/redux-page-loader
```
This module allows you to embed static html into your page, and then
when the page is ready to be shown easily remove it.
## Requirements
- redux
- redux-most
## Usage
### Static HTML
Your static html and css should live within your own project, and how you put it into
the page is your own choice. We recommend using webpack with the html plugin.
For example:
```javascript
// static.js
module.exports = {
html: () => {
return `
`;
},
css: () => {
return `
.page-loader > .fancy-spinner {
background: red;
}
`;
}
};
// webpack.config
const HtmlWebpackPlugin = require('html-webpack-plugin');
const staticPageLoader = require('../somelocation/static');
new HtmlWebpackPlugin({
...
pageLoader: {
css: staticPageLoader.css(),
html: staticPageLoader.html(),
}
})
// index.ejs
...
<%= htmlWebpackPlugin.options.pageLoader.css %>
<%= htmlWebpackPlugin.options.pageLoader.html %>
```
### Static Page Destroyer
You obviously want to remove the static html from the page at some point.
This package takes care of actually removing the element from the DOM, but it gives you a chance to handle how to tranisition it out before it is removed.
### Page Guard
We provide a component which will not render your component until the page is ready.
Once it has determined the page is ready it will render your component behind the static page until the static page is removed.
This is a connected component.
```jsx
(
// <-- This is your application
)}
renderDestroyer={() => (
)}
/>
```
## Setup
This module uses epics to handle business logic, and reducers to handle state. If you instead prefer to have it setup as a middleware that option is also available.
### Method 1 - redux-most epics
```javascript
// Reducer
import {
reducer as pageLoader,
REDUCER_MOUNT_POINT,
} from '@team-griffin/redux-page-loader';
combineReducers({
[REDUCER_MOUNT_POINT]: pageLoader,
});
// Epics
import { createEpicMiddleware, combineEpics } from 'redux-most';
import { pageLoaderEpics } from '@team-griffin/redux-page-loader';
createEpicMiddleware(combineEpics([
pageLoaderEpics,
]));
```
### Method 2 - redux middleware
```javascript
// Reducer
import {
reducer as pageLoader,
REDUCER_MOUNT_POINT,
} from '@team-griffin/redux-page-loader';
combineReducers({
[REDUCER_MOUNT_POINT]: pageLoader,
});
// Epics
import { middleware } from '@team-griffin/redux-page-loader';
// Add middleware to the store
```
### Loaded and Configuration
There is a signal to update the module configuration.
*The default config is:*
```javascript
{
delay: 2000, // How long the transition takes (before being removed)
domSelector: '.page-loader', // How to find the element to remove
}
```
*Changing the config*
```javascript
import { signals } from '@team-griffin/redux-page-loader';
store.dispatch(signals.configure({
delay: 1000,
}));
```
Somewhere in your logic your application will have determined it is ready.
You can signal that your application is loaded via:
```
import { messages } from '@team-griffin/redux-page-loader';
store.dispatch(messages.loaded());
```