better-react-spinkit

better-react-spinkit copied to clipboard

Plugging in a <Circle /> into my web app, it aligns left.

Appears the only place where I can get it to center is if I put "margin:auto;" in the <div style="..."> element when exploring with Chrome.

Unfortunately, that is completely inaccessible through the API. Is this something that could be extended, allowing custom bits of CSS or classes to be injecting?

I was able to center the spinners by wrapping them inside a div with this style:

display: flex;
justify-content: center;

But why there not working just <Circle style={{margin: "0 auto"}}? It's common practice in React, as far as i know.

@Amareis, you're right. This should support style props. I'll work it into the next release.

An example of the code that allowed me to center the spinner was as follows (I was using FoldingCube and borrowed the idea from @rvanmil above):

<div className="loader"> <FoldingCube size={100} color='#7DA1BF'/> </div>

CSS: .loader { position: absolute; top: calc(50% - 4em); left: calc(50% - 4em); width: 6em; height: 6em; }

Thanks for considering adding it as a style prop in a future release @bentatum :)