react-loader-advanced-next

Version 1.0.2

> A simple loader overlaying your component during async events.

This is a simplified and updated version of react-loader-advanced
to support more recent react versions keeping basic features intact.
react-loader-advanced-next provides a component into which you can wrap
an arbitrary React component.

Install

``shell
npm install react-loader-advanced-next --save
`

Compatibility

Compatible with React versions ^16.0.0, ^17.0.0 and ^18.0.0.

Usage

__1. Include Loader__

Node:
`js
import Loader from 'react-loader-advanced-next';
`

__2. Wrap your component inside the loader__
`jsx



`
__3. Style the loader using foregroundStyle and backgroundStyle__

`jsx
backgroundStyle={{backgroundColor: 'black'}}>
...
`

You may optionally disable all default styling by setting property
disableDefaultStyles to true.


__4. Optionally if you wish, hack the loader using CSS styles
knowing the class-hierarchy__

`html

Loading

`

See more thorough structure in ./src/react-loader-advanced.js.

Options (props)

__show__ (bool)


This is the only required prop.
When _true_, loader overlay is displayed.
When _false_, only actual content is displayed.

__priority__ (int)


The loader(s) with the highest priority will always be the only loader(s)
showing. If loaders with lower priorities stop loading before the one with
the highest priority, they will never be shown.
Default priority is 0.

__hideContentOnLoad__ (bool)


Hide content underneath loader overlay when loading.

__contentBlur__ (int = px)


Blur the background on browsers that support CSS filter().

__message__ (node = element|string)


Set the displayed message on foreground while loading.
Can be an arbitrary element like a spinner of your choice
-- or just a simple string. Defaults to string "loading...".

__messageStyle__ (obj)


Extends the message element style.

__foregroundStyle__ (obj)


Set a style for the loader foreground.
Extends default styles.

__backgroundStyle__ (obj)


Set a style for the loader background.
Extends default styles.

__contentStyle__ (obj)


Extends the content wrapper element style.

__disableDefaultStyles__ (bool)


Disables default styles for background, foreground and message if set
to _true_ (not recommended).

FAQ

##### Can I use a spinner element?

Yes, you can define a spinner element in the message-prop.

`jsx
const spinner = any-spinner-you-want;


...

``

License

ISC