Skip to content

A React component that renders a spinning ASCII art donut. Highly customizable with properties for scale, color and font size.

License

Notifications You must be signed in to change notification settings

andy19910102/react-spinning-donut

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

9 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

React Spinning Donut

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.

Spinning Donut

Live Demo: https://andy19910102.github.io/react-spinning-donut/

Installation

To install this component into your project, you can use npm, yarn:

$ npm i react-spinning-donut
$ yarn add react-spinning-donut

Usage

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>
);
}

Props

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
/>

Author

This package was created by Huang An Sheng. You can find more about the author on GitHub.

Contribute

If you'd like to contribute, please fork the repository and use a feature branch. Pull requests are warmly welcome.

License

The code in this project is licensed under the MIT license.

About

A React component that renders a spinning ASCII art donut. Highly customizable with properties for scale, color and font size.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published