davidhu2000 / react-spinners Goto Github PK
View Code? Open in Web Editor NEWA collection of loading spinner components for react
Home Page: https://www.davidhu.io/react-spinners
License: MIT License
A collection of loading spinner components for react
Home Page: https://www.davidhu.io/react-spinners
License: MIT License
Windows are not defined by Server Side Rendering.
What is the solution, please help.
Additional context
Can you add custom message display functionality?
example error:
ERROR in ./node_modules/react-spinners/dist/spinners/HashLoader.js
Module not found: Error: Can't resolve 'recompose' in '/Users/mking/search/node_modules/react-spinners/dist/spinners'
I'm trying to horizontally center the spinner but it doesn't seem to work with the following code:
import React from 'react';
import { BarLoader } from 'react-spinners';
import styled from 'styled-components';
const Wrapper = styled.div``;
const StyledBarLoader = styled(BarLoader)`
margin: 0 auto;
`;
// TODO: dont use third party module to avoid bloating bundle size
export default () => (
<Wrapper>
<StyledBarLoader />
</Wrapper>
);
Do you want to request a feature or report a bug?
Bug
If reporting a bug, what version of react-spinners
are you currently using?
"react-spinners": {
"version": "0.5.4",
"resolved": "https://registry.npmjs.org/react-spinners/-/react-spinners-0.5.4.tgz",
"integrity": "sha512-jo7BE8prvnZNL7xNrQL16geVXH6LmaWrhvvXnmUwz2MhFO14bhlAdCLuKCwqmUJ37kGphH0C2CJRThwkjfpVzw==",
"requires": {
"@emotion/core": "^10.0.4",
"prop-types": "^15.5.10",
"recompose": "0.27.1 - 0.30.0"
}
},
What is the current behavior?
When using TypeScript & Emotion, the following will compile correctly:
<FadeLoader
css={`display: block; margin: 0 auto;`}
color={"#000000"}
loading={true}
/>
However this triggers a PropTypes validation error:
Warning: Failed prop type: Invalid prop css
of type string
supplied to Loader
, expected object
.
If the current behavior is a bug, please provide the steps to reproduce
<FadeLoader
css={`display: block; margin: 0 auto;`}
color={"#000000"}
loading={true}
/>
Hi there,
I'm using meteor and when deploying to production some of the CSS styles are missing while they are all there in development. I assume that this is due to emotion's pre compiling the css. e.g. the border-radius
from the RingLoader:
Since this is a react library I am wondering: What is the reason for emotion?
According to this benchmark it is even slower than reacts CSS inline functionality.
https://github.com/A-gambit/CSS-IN-JS-Benchmarks/blob/master/RESULT.md
Describe the bug
When using the HashLoader, the color prop makes it not appear.
To Reproduce
Steps to reproduce the behavior:
<HashLoader color='red' />
<HashLoader />
renders in black.Expected behavior
It should pull in the color, but nothing renders.
Hi
I have this
import BarLoader from 'react-spinners/BarLoader';
<BarLoader
size={100}
sizeUnit={"%"}
color={'#123abc'}
loading={true}
/>
but css still is
.css-15eubu4 {
position: relative;
width: 100px;
height: 4px;
overflow: hidden;
background-color: rgba(18,58,188,0.2);
background-clip: padding-box;
version : "react-spinners": "^0.4.5",
Do you want to request a feature or report a bug?
Feature
If reporting a bug, what version of react-spinners
are you currently using?
0.5.1
What is the current behavior?
Adding react-spinners 0.5.1 as a dependency of a react project on codesandbox.io raises an error during the build of the project. This prevents react-spinners from being part of any example/project hosted there.
The error:
Error
Could not fetch dependencies, please try again in a couple seconds: Something went wrong while packaging the dependency [email protected]: ENOENT: no such file or directory, scandir '/tmp/3665931091/node_modules/react-spinners/dist'
See example: https://codesandbox.io/s/kko6481k3r
Do you want to request a feature or report a bug?
bug
If reporting a bug, what version of react-spinners
are you currently using?
"react-spinners": "1.0.0",
What is the current behavior?
does not work. Can't resolve './beat_loader.jsx'
If the current behavior is a bug, please provide the steps to reproduce
Do you want to request a feature or report a bug?
Feature
If reporting a bug, what version of react-spinners
are you currently using?
v0.4.5
What is the current behavior?
This is an extension of issue #23.
It would be awesome to also support the loading of individual packages via TypeScript.
See also, this comment: #23 (comment)
at larger size, the circles are squashed together.
Currently the loader bar jumps when added to the page- I'd like to make it position absolute so it doesn't jump and re-flow the page. How do I do this?
hi,
i just updated from version 0.5.4 to 0.5.7 and now my import does not work any more. i used to do
import { GridLoader } from 'react-spinners';
but this returns a undefined. i changed my code to
import GridLoader from 'react-spinners/GridLoader';
which works.
perhaps the commit 0a08529 has a negative side effect?
Do you want to request a feature or report a bug? Bug
If reporting a bug, what version of react-spinners
are you currently using?
0.5.3
What is the current behavior?
Getting Bundling Failed Error
If the current behavior is a bug, please provide the steps to reproduce
I Installed react-spinners using npm install --save react-spinners and added below lines in .babelrc file {
"presets": ["react", "env"],
"plugins": ["emotion"]
}
getting bundling failed error
this is the error i am getting
"bundling failed: Error: While trying to resolve module react-spinners
from file /ReactNative/NoteList.js
, the package /ReactNative/node_modules/react-spinners/package.json
was successfully found. However, this package itself specifies a main
module field that could not be resolved (/ReactNative/node_modules/react-spinners/dist/index.js
. Indeed, none of these files exist"
Failed prop type: Invalid prop margin
of type string
supplied to Loader
, expected number
.
This is a bug report. react-spinners version 0.5.3.
The css
prop is documented to override the default css, but it does not actually do this, if used like in the documentation, for example like this in my case:
const cssOverride = css`
margin: 20% auto 40%;
display: block;
`;
const loader = (
<ClipLoader
css={cssOverride}
/>
);
The display: block;
is correctly added, but in a way that it does not override the default display: inline-block
(the respective <style data-emotion="css"></style>
is added earlier in the DOM).
However, if I enclose the css string in { } inside the template literal, it does override:
const cssOverride = css`{
margin: 20% auto 40%;
display: block;
}`;
This seems to be the way the default styles are written as well. I'm not experienced with emotion-js, so I cannot explain why that makes the object precedence work as intended, but it seems that's how it works.
Do you want to request a feature or report a bug?
Yes, css from @emotion/core doesn't work.
If reporting a bug, what version of react-spinners
are you currently using?
last
If the current behavior is a bug, please provide the steps to reproduce
I don't know why. But it's a problem. @emotions/core doesn't work with your component. And I can't change animation. How I can rebuild module?
need a way to get the vertical-align
style property on the ClipLoader
.
Halogen had it and it allowed me to center the loader inline with text on a Button element.
having a way to pass-thru style or className would be helpful, or something to that extent, or when hard-coding an inline display on an element, providing a prop to tweak the verticalAlign
thank you for your work!
Hi,
Your spinners are awsome and fun ! I tried the PacmanSpinner and it's really cool but when you change the props 'Size' only the Pacman size change and not balls.
Is it a way to change the balls size ?
Regards,
KΓ©vin
Getting an error using any component that's dependent on the emotion
package. I think it needs to be moved to a full dependency.
How yo change speed of animation?
Do you want to request a feature or report a bug?
Report a bug.
If reporting a bug, what version of react-spinners
are you currently using?
0.2.5
What is the current behavior?
The RotateLoader
does not render anything on the page and appears as an empty 0 x 0 element.
If the current behavior is a bug, please provide the steps to reproduce
import React from 'react';
import { RotateLoader } from 'react-spinners';
const MyComponent = () => <RotateLoader />;
Do you want to request a feature or report a bug?
No
If reporting a bug, what version of react-spinners
are you currently using?
What is the current behavior?
I want to position the spinner horizontally and vertically center inside
If the current behavior is a bug, please provide the steps to reproduce
This is a feature request.
How can i make the background transparent? a background props wound be very useful
Hello,
Using domkit prevents react-spinners to be used with Server side rendering technics, as domkit needs the document javascript global which is not present on the server.
Should it be possible to get rid of domkit ?
Do you want to request a feature or report a bug?
Bug
If reporting a bug, what version of react-spinners
are you currently using?
0.2.5
What is the current behavior?
Providing radius
prop in ScaleLoader
does not have any effect.
If the current behavior is a bug, please provide the steps to reproduce
Create a ScaleLoader
with radius
prop = 2px. Can see that the bars don't actually get this border-radius
. Also can see a error in dev tools as shown below.
Reason for bug
Must set the border-radius
css = {radius}px
, but current it set to only {radius}
, i.e. trailing px is missing.
I've found about it (for giving 100% width to a BarLoader) by looking at the sources. Should be added to the Readme.md at least!
Need help for this.....
When I am doing like this its working fine...
this.setState({
alert: (
<SweetAlert
style={{
display: "block",
marginTop: "-100px",
backgroundColor: "transperent"
}}
showConfirm={false}
>
<CircularProgress color="primary" />
</SweetAlert>
)
});
setTimeout(this.hideAlert, 2000);
What is the current behavior?
I want this Fadeloader then I am getting stuck
this.setState({
alert: (
// <SweetAlert
// style={{
// display: "block",
// marginTop: "-100px",
// backgroundColor: "transperent"
// }}
// showConfirm={false}
// >
<FadeLoader
css={override}
sizeUnit={"px"}
size={150}
color={"#123abc"}
loading={this.state.loading}
/>
//</SweetAlert>
)
});
setTimeout(this.hideAlert, 2000);
can you help me out how to set this FadeLoder please tell me...
using nextjs and webpack after installing can't seem to make it work
import BarLoaderComponent from "./BarLoader";
^^^^^^^^^^^^^^^^^^
SyntaxError: Unexpected identifier
at Module._compile (internal/modules/cjs/loader.js:718:23)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:785:10)
at Module.load (internal/modules/cjs/loader.js:641:32)
at Function.Module._load (internal/modules/cjs/loader.js:556:12)
at Module.require (internal/modules/cjs/loader.js:681:19
I don't have babel, how does this work with webpack?
I couldn't build my project anymore and after some digging, it seems like this module was the origin. Removing it instantly fixed everything, the strange thing is that this only occurred after I ran npm update. So it seems like your dev dependencies being outdated is causing some breaking issues.
It would be awesome if this package would be compatible with styled-components, not just emotion
.
I'd been looking into the code a little and the only thing that has to be done is make className
prop works just as a className
prop (appending the component class) π Right now when I do <DotLoader className="my-class" />
it doesn't do anything π’
Would you like this kind of feature to be added? I could do that in my spare time, just wanted to know if you'd accept the idea.
Do you want to request a feature or report a bug?
bug
If reporting a bug, what version of react-spinners
are you currently using?
N/A
What is the current behavior?
Some loaders do not render properly because the css uses composes
key, which was deprecated in emotion 8. Need to resolve this.
If the current behavior is a bug, please provide the steps to reproduce
I was previously using an older version of react-spinners, but I can confirm that the following behavior is also reflected on the current version. The spinner I have been testing is the "BarLoader" and it was already accepted knowledge to me that the spinner was CPU intensive when it was displayed (Drawing close to 30% more CPU usage when displayed vs. not displayed). The problem I ran into is that the obvious way to disable the loader by passing a Boolean value into the "loading" prop is not disabling the loader. MY WORKAROUND as you can see below was to convert the "loading" prop value from a Boolean to an Integer value. This leads me to believe that there is an issue processing Boolean values during the component update process, so without the following change to my code, my website is consistently drawing between 30-40% CPU usage even while standing IDLE. I realize that this module is utilizing "fbjs" utility functions to perform shallow comparisons, so it may be an issue with their code.
import React from 'react'
import {BarLoader} from 'react-spinners'
export default class PageLoadingOverlay extends React.Component{
constructor(props){
super(props);
this.state = {
loading: false
}
}
componentWillMount(){
this.delayLoading(true, 1000);
this.delayLoading(false, 2000);
}
render(){
return (
<div>
<BarLoader
color="#FA5606"
loading={this.state.loading}/>
</div>
)
}
delayLoading(shouldLoad, delay){
setTimeout(() => {
this.setState({
loading: shouldLoad
})
}, delay)
}
}
import React from 'react'
import {BarLoader} from 'react-spinners'
export default class PageLoadingOverlay extends React.Component{
constructor(props){
super(props);
this.state = {
loading: false
}
}
componentWillMount(){
this.delayLoading(true, 1000);
this.delayLoading(false, 2000);
}
render(){
return (
<div>
<BarLoader
color="#FA5606"
loading={this.state.loading? 1 : 0}/>
</div>
)
}
delayLoading(shouldLoad, delay){
setTimeout(() => {
this.setState({
loading: shouldLoad
})
}, delay)
}
}
Do you want to request a feature or report a bug?
I want to report a bug.
If reporting a bug, what version of react-spinners
are you currently using?
I am using react-spinners version 0.5.0
What is the current behavior?
Following the example in the read me causes a warning:
Warning: Failed prop type: Invalid prop
cssof type
objectsupplied to
Loader, expected
string.
If the current behavior is a bug, please provide the steps to reproduce
Follow the code example in the read me.
Currently, some devDependencies
are outdated, need to bring them up-to-date.
Hi, is there any way to load only one specific loader without the whole spinner being bundled. Something like what lodash
did, for example:
import BarLoader from 'react-spinners/bar-loader';
Do you want to request a feature or report a bug?
Request a feature
It would be great if you add an option to disable annoying jump of ClipLoader
It looks like spinners don't render on the server side with Next.js. I am using the latest version 7.0.2 and they only appear on the client side render.
I have done a bit of investigation and saw that emotion was implemented for the purposes of SSR some time ago in #5 however it doesn't seem to work. I have enabled the emotion plugin in .babelrc
as documented.
It appears emotion's SSR capability may work for Next.js out the box since v10 as documented here.
Is it possible to get the emotion dependency updated please? I appreciate some migration will be involved so this could potentially be a big job...
Describe the bug
Error within UI after successful build:
Error thrown during babel minification process in meteor:
export default Component;
at maybeThrowMinifyErrorBySourceFile
(packages/minifyStdJS/plugin/minify-js.js:96:26)
at files.forEach.file (packages/minifyStdJS/plugin/minify-js.js:135:9)
at Array.forEach (<anonymous>)
at MeteorBabelMinifier.processFilesForBundle
(packages/minifyStdJS/plugin/minify-js.js:118:9)
While minifying app code:
packages/minifyStdJS/plugin/minify-js.js:96:26: Babili minification error
within packages/modules.js:
node_modules/react-spinners/dist/BeatLoader.js
Only one default export allowed per module.:
export default Component;
at maybeThrowMinifyErrorBySourceFile
(packages/minifyStdJS/plugin/minify-js.js:96:26)
at files.forEach.file (packages/minifyStdJS/plugin/minify-js.js:135:9)
at Array.forEach (<anonymous>)
at MeteorBabelMinifier.processFilesForBundle
(packages/minifyStdJS/plugin/minify-js.js:118:9)
To Reproduce
Steps to reproduce the behavior:
Temporary Solution
Our solution was to downgrade to version 0.5.12 until this is resolved.
I would suggest changing "BarLoader" width from number to string to approve width="100%"
in file SyncLoader.jsx on line 99 wrong margin prop type. Current - string, expected - number (which have in documentation and other components).
I have been using [email protected] without issue.
I just installed [email protected] and I got the following issue: -
ERROR in ./node_modules/recompose/es/Recompose.js
Module build failed: Error: ENOENT: no such file or directory, open C:\xampp\htdocs\newapp\app\node_modules\recompose\es\Recompose.js'
@ ./node_modules/react-spinners/dist/spinners/BarLoader.js 3:4-93
@ ./node_modules/react-spinners/dist/index.js
@ ./node_modules/react-spinners/index.js
The odd thing is that I didn't change any code at all - simply installing recompose caused the issue. I uninstalled recompose and it works fine again.
Any ideas?
I'd like to set a BarLoader for example with width:100%.
Although it still works, the console throws the following error/warning message:
Warning: Failed prop type: Invalid prop
widthof type
stringsupplied to
Loader, expected
number. in Loader (created by onlyUpdateForKeys(Loader))
Example:
<RingLoader width={'100%'} loading={this.state.loading} />
It would be great if this does not throw a warning, or another property would allow for that.
Thanks,
A declarative, efficient, and flexible JavaScript library for building user interfaces.
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. πππ
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google β€οΈ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.