![Create React App Officially Deprecated Amid React 19 Compatibility Issues](https://cdn.sanity.io/images/cgdhsj6q/production/04fa08cf844d798abc0e1a6391c129363cc7e2ab-1024x1024.webp?w=400&fit=max&auto=format)
Security News
Create React App Officially Deprecated Amid React 19 Compatibility Issues
Create React App is officially deprecated due to React 19 issues and lack of maintenance—developers should switch to Vite or other modern alternatives.
@murasoftware/react-loading-overlay
Advanced tools
Loading overlays with fade, spinner, message support.
A customizable, simple loading overlay with spinner and transitions.
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.
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>
active
(boolean)
true
- whether the loader is visible.fadeSpeed
(milliseconds)
500
- the transition speed for fading out the overlay.onClick
(function)
undefined
- click handler for the overlay when active.className
(string)
undefined
- the className for the wrapping <div />
that is present whether active or not.classNamePrefix
(string)
_loading_overlay_
- the prefix for all classNames on the generated elements. see Styling for more info.spinner
(boolean OR node)
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)
undefined
- the text or react node to render in the loader overlay when active.styles
(object)
undefined
- see Styling for more info.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>
)
}
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.
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>
)
}
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>
)
}
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>
)
}
FAQs
Loading overlays with fade, spinner, message support.
The npm package @murasoftware/react-loading-overlay receives a total of 17 weekly downloads. As such, @murasoftware/react-loading-overlay popularity was classified as not popular.
We found that @murasoftware/react-loading-overlay demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 5 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Create React App is officially deprecated due to React 19 issues and lack of maintenance—developers should switch to Vite or other modern alternatives.
Security News
Oracle seeks to dismiss fraud claims in the JavaScript trademark dispute, delaying the case and avoiding questions about its right to the name.
Security News
The Linux Foundation is warning open source developers that compliance with global sanctions is mandatory, highlighting legal risks and restrictions on contributions.