npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-loader-advanced

v1.7.1

Published

Show loader overlaying your component during async events.

Downloads

21,586

Readme

react-loader-advanced

npm version Download Count

Show loader overlaying your component during async events.

React-loader-advanced provides a component into which you can wrap an arbitrary React component. The loader will fill the area of the component and display a loading message. You may need multiple loader containers at different parts of your page. This loader also supports setting priority for the loaders so that the lower priority loaders will never show if there is another loader already showing. This is beneficial when you want to prevent transparent loaders overlapping, which would look ugly.

Demo

Install

npm install react-loader-advanced --save

Compatibility

Compatible with React versions 0.13.x, 0.14.x, ^15.0.0 and ^16.0.0.

Usage

1. Include Loader

Node:

import Loader from 'react-loader-advanced';

2. Wrap your component inside the loader

<Loader show={true} message={'loading'}>
  <SomeComponent />
</Loader>

3. Style the loader using foregroundStyle and backgroundStyle

<Loader foregroundStyle={{color: 'white'}}
  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

<div class="Loader__background">
  <div class="Loader__foreground">
    <div class="Loader__message">
      Loading
    </div>
  </div>
</div>

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).

transitionConfig (object) Configure ReactCSSTransitionGroup for the loader overlay to add e.g. fade animation. See: react-transition-group

FAQ

Can I use a spinner element?

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

const spinner = <span>any-spinner-you-want</span>;

<Loader message={spinner}>
...
</Loader>

License

MIT