SparkleButton

A customizable, animated circular button component for React applications. The SparkleButton features an icon in the center, surrounded by sparkles that animate in a clockwise rotation. The button has customizable colors, sizes, and sparkles.

Installation

To install the SparkleButton package, run:

npm install sparkle-button

Or if using yarn:

yarn add sparkle-button

Usage

First, import the SparkleButton component:

import SparkleButton from 'sparkle-button';

Then, use the SparkleButton component in your React application:

<SparkleButton />

Customization

You can customize various aspects of the SparkleButton component, such as the icon, size, colors, and more. Here are some examples:

Changing the Icon

NOTE: If there is an issue with the size not working correctly you may have to remove the "width=" attribute from the svg To change the SVG icon, pass the icon prop to the SparkleButton component:

const rocketIcon = (
  <svg viewBox="0 0 512 512">
    <path d="M505.12019,19.09375c-1.18945-5.53125-6.65819-11-12.207-12.1875C460.716,0,435.507,0,410.40747,0,307.17523,0,245.26909,55.20312,199.05238,128H94.83772c-16.34763.01562-35.55658,11.875-42.88664,26.48438L2.51562,253.29688A28.4,28.4,0,0,0,0,264a24.00867,24.00867,0,0,0,24.00582,24H127.81618l-22.47457,22.46875c-11.36521,11.36133-12.99607,32.25781,0,45.25L156.24582,406.625c11.15623,11.1875,32.15619,13.15625,45.27726,0l22.47457-22.46875V488a24.00867,24.00867,0,0,0,24.00581,24,28.55934,28.55934,0,0,0,10.707-2.51562l98.72834-49.39063c14.62888-7.29687,26.50776-26.5,26.50776-42.85937V312.79688c72.59753-46.3125,128.03493-108.40626,128.03493-211.09376C512.07526,76.5,512.07526,51.29688,505.12019,19.09375ZM384.04033,168A40,40,0,1,1,424.05,128,40.02322,40.02322,0,0,1,384.04033,168Z" />
  </svg>
);
<SparkleButton icon={rocketIcon} />

Changing the Size

To change the size of the button, pass the size prop to the SparkleButton component:

<SparkleButton size={60} />

The size prop accepts a number representing the diameter of the button in pixels.

Customizing Colors

You can customize the background and icon colors by passing the backgroundColor, hoverBackgroundColor, activeBackgroundColor, and iconColor props:

<SparkleButton
  backgroundColor="#333"
  hoverBackgroundColor="#555"
  activeBackgroundColor="#222"
  iconColor="#FFF"
/>

Customizing Sparkles

To customize the sparkles, pass the sparkleColors prop to the SparkleButton component:

<SparkleButton sparkleColors={['red', 'yellow', 'green', 'fuchsia', 'white', 'pink', 'PaleGreen', 'SlateGray']} />

The sparkleColors prop accepts an array of color strings.

Positioning the Icon

To customize the icon's position within the button, pass the iconOffsetX and iconOffsetY props:

<SparkleButton iconOffsetX={-2} iconOffsetY={3} />

The iconOffsetX and iconOffsetY props accept numbers representing the horizontal and vertical offset in percentages, respectively.

Stop Sparkles on Click

To make the sparkles stop animating after the button is clicked, pass the stopSparklesOnClick prop:

<SparkleButton stopSparklesOnClick />

Props

| Prop | Type | Required | Description | Default Value | |---------------------|-------------------------|----------|------------------------------------------------------------------------------|---------------| | icon | ReactNode | No | The SVG icon or React component to display in the center of the button | Rocket Icon | | size | number | No | The diameter of the button in pixels | 60 | | backgroundColor | string | No | The background color of the button | '#333' | | hoverBackgroundColor | string | No | The background color of the button when hovered | '#555' | | activeBackgroundColor | string | No | The background color of the button when active (pressed) | '#222' | | iconColor | string | No | The color of the icon | '#FFF' | | sparkleColors | Array | No | An array of color strings for the sparkles | (see below) | | iconOffsetX | number | No | The horizontal offset of the icon in percentage | 0 | | iconOffsetY | number | No | The vertical offset of the icon in percentage | 0 | | stopSparklesOnClick | boolean | No | If true, the sparkles will stop animating when the button is clicked | false |

Default sparkleColors: ['red', 'yellow', 'green', 'fuchsia', 'white', 'pink', 'PaleGreen', 'SlateGray']

License

This project is licensed under the MIT License.