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

@murasoftware/react-loading-overlay

v1.0.3

Published

Loading overlays with fade, spinner, message support.

Downloads

145

Readme

React-Loading-Overlay

npm version minified + gzipped downloads

A customizable, simple loading overlay with spinner and transitions.



Changes in version 1.x

v1.x is a rewrite focused on flexibility. Customization is no longer driven by convenience props, but instead by a more comprehensive styles interface. The intention is to provide an interface that is a bit more tailored to composition and creating your own loader rather than just dropping an instance in place.


Quick start :running_woman:

Wrap your components in it and toggle the active prop as necessary.

import LoadingOverlay from 'react-loading-overlay';

<LoadingOverlay
  active={isActive}
  spinner
  text='Loading your content...'
  >
  <p>Some content or children or something.</p>
</LoadingOverlay>

Props :hammer_and_wrench:

  • active (boolean)
    • default: true - whether the loader is visible.
  • fadeSpeed (milliseconds)
    • default: 500 - the transition speed for fading out the overlay.
  • onClick (function)
    • default: undefined - click handler for the overlay when active.
  • className (string)
    • default: undefined - the className for the wrapping <div /> that is present whether active or not.
  • classNamePrefix (string)
    • default: _loading_overlay_ - the prefix for all classNames on the generated elements. see Styling for more info.
  • spinner (boolean OR node)
    • default: false - renders the default spinner when true (and when the loader is active). Otherwise you can provide any valid react node to use your own spinner.
  • text (node)
    • default: undefined - the text or react node to render in the loader overlay when active.
  • styles (object)
    • default: undefined - see Styling for more info.

Custom Spinner :recycle:

Adding a custom spinner is super easy, here's an example:

Acquire the spinner you want to use. Doesn't matter where you get it, as long as you're rendering a valid React node. It can be a custom svg in your codebase if you want. For this example let's use react-spinners.

npm install react-spinners

Then simply provide it to the spinner prop for your loader.

import LoadingOverlay from 'react-loading-overlay'
import BounceLoader from 'react-spinners/BounceLoader'

export default function MyLoader({ active, children }) {
  return (
    <LoadingOverlay
      active={active}
      spinner={<BounceLoader />}
    >
      {children}
    </LoadingOverlay>
  )
}

Custom styling :nail_care:

Previous versions were difficult to customize because of limited configuration props. This iteration uses a form of styling heavily inspired by Style configuration was inspired by react-select. Internally using emotion to style elements and providing a styles interface to either extend the base styling or completely overwrite it. Additionally, a classNamePrefix prop is available to customize the classNames used on each element, allowing you to define your own styles with your own regular css setup.

Keep reading for details on each option.

Styles with emotion :woman_singer:

The styles prop accepts an object where each key represents one of the following elements:

  • wrapper - main wrapping element, always present.
  • overlay - the overlay positioned over top of the children.
  • content - element inside the overlay containing the spinner and text.
  • spinner - default spinner element.

Each value must be an object or a function (where the first parameter is the base default styles) that returns an object. In either case, the resulting object will be applied as the final set of styles via emotion.css. See examples below.

  • export default function MyLoader({ active, children }) {
      return (
        <LoadingOverlay
          active={active}
          styles={{
            overlay: (base) => ({
              ...base,
              background: 'rgba(255, 0, 0, 0.5)'
            })
          }}
        >
          {children}
        </LoadingOverlay>
      )
    }
  • export default function MyLoader({ active, children }) {
      return (
        <LoadingOverlay
          active={active}
          styles={{
            spinner: (base) => ({
              ...base,
              width: '100px',
              '& svg circle': {
                stroke: 'rgba(255, 0, 0, 0.5)'
              }
            })
          }}
        >
          {children}
        </LoadingOverlay>
      )
    }
  • export default function MyLoader({ active, children }) {
      return (
        <LoadingOverlay
          active={active}
          styles={{
            wrapper: {
              width: '400px',
              height: '400px',
              overflow: active ? 'hidden' : 'scroll'
            }
          }}
        >
          {children}
        </LoadingOverlay>
      )
    }

Styles with css

Every element has a classname you can target via your own css configuration.

  • _loading_overlay_wrapper
  • _loading_overlay_overlay
  • _loading_overlay_content
  • _loading_overlay_spinner

You can also specify your own classNamePrefix if you wish. For example, if using: classNamePrefix="MyLoader_":

  • MyLoader_wrapper
  • MyLoader_overlay
  • MyLoader_content
  • MyLoader_spinner

The base styles will still be applied, but you could negate all of these using the styles prop:

  • export default function MyLoader({ active, children }) {
      return (
        <LoadingOverlay
          active={active}
          styles={{
            wrapper: {},
            overlay: {},
            content: {},
            spinner: {}
          }}
          classNamePrefix='MyLoader_'
        >
          {children}
        </LoadingOverlay>
      )
    }

Styles with styled-components :nail_care:

You can style the loader using styled-component as you might expect.

Simply include the nested elements in your style definition:

  • import styled from 'styled-components'
    
    const StyledLoader = styled(LoadingOverlay)`
      width: 250px;
      height: 400px;
      overflow: scroll;
      .MyLoader_overlay {
        background: rgba(255, 0, 0, 0.5);
      }
      &.MyLoader_wrapper--active {
        overflow: hidden;
      }
    `
    
    export default function MyLoader({ active, children }) {
      return (
        <StyledLoader
          active={active}
          classNamePrefix='MyLoader_'
        >
          {children}
        </StyledLoader>
      )
    }