This is a React component that renders an engaging, spinning donut using ASCII art. This project represents an interesting blend of art and technology, leveraging both the power of JavaScript and the aesthetics of ASCII art to create a dynamic visual component.
Live Demo: https://andy19910102.github.io/react-spinning-donut/
To install this component into your project, you can use npm, yarn:
$ npm i react-spinning-donut
$ yarn add react-spinning-donut
Import Donut component from react-spinning-donut:
import Donut from 'react-spinning-donut';
function MyApp() {
return (
<div>
<Donut />
</div>
)
}
You can customize the appearance of the donut using props.
import Donut from 'react-spinning-donut';
function MyApp() {
return (
<div>
<Donut
color="red"
scaleX={1}
scaleY={0.75}
/>
<Donut
color="#8E2DE2"
scaleX={1}
scaleY={0.5}
/>
<Donut
color="rgb(194 65 12)"
scaleX={0.5}
scaleY={0.3}
frameInterval={50}
/>
</div>
);
}
Prop | Type | Default | Description |
---|---|---|---|
scaleX |
Number | 1 | Horizontal scale of the donut. |
scaleY |
Number | 1 | Vertical scale of the donut. |
color |
String | "#000" | CSS color of the donut. |
fontSize |
Number | 8 | Font size in pixels of the donut. |
interval |
Number | 100 | Interval in milliseconds at which the donut spins (one frame delay). |
<Donut
scaleX={1} // The horizontal scale of the donut. Default: 1
scaleY={1} // The vertical scale of the donut. Default: 1
color="#000" // The color of the donut. Default: "#000"
fontSize={8} // The font size of the donut. Default: 8
frameInterval={100} // The time interval (in milliseconds) between each frame. Default: 100
/>
This package was created by Huang An Sheng. You can find more about the author on GitHub.
If you'd like to contribute, please fork the repository and use a feature branch. Pull requests are warmly welcome.
The code in this project is licensed under the MIT license.