✨ sparkle

A delightful React component that adds animated sparkle effects to your content. Perfect for making your UI elements shine!

Installation

npm install sparkle

Usage

import { Sparkle } from 'sparkle';

function App() {
  return (
    <div>
      <h1>
        <Sparkle>Welcome!</Sparkle>
      </h1>
      
      <p>
        This text has <Sparkle count={20} color="#FF6B9D">sparkles</Sparkle> around it!
      </p>
    </div>
  );
}

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | children | React.ReactNode | required | The content to wrap with sparkles | | count | number | 12 | Number of sparkle particles | | color | string | '#FFD700' | Color of the sparkles (hex, rgb, or named color) | | size | number | 4 | Size of each sparkle in pixels |

Examples

Basic Usage

<Sparkle>Hello World!</Sparkle>

Custom Count

<Sparkle count={30}>More sparkles!</Sparkle>

Custom Color

<Sparkle color="#FF6B9D">Pink sparkles</Sparkle>
<Sparkle color="rgb(100, 200, 255)">Blue sparkles</Sparkle>
<Sparkle color="purple">Purple sparkles</Sparkle>

Custom Size

<Sparkle size={8}>Bigger sparkles</Sparkle>

Combined Customization

<Sparkle count={25} color="#00FF88" size={6}>
  Fully customized sparkles!
</Sparkle>

With Buttons

<button>
  <Sparkle count={15} color="#FFD700">
    Click me! ✨
  </Sparkle>
</button>

With Headings

<h1>
  <Sparkle count={20} color="#FF6B9D" size={5}>
    Special Announcement
  </Sparkle>
</h1>

Requirements

• React >= 16.8.0
• React DOM >= 16.8.0

Documentation

For a general guide on how to create an npm package and set up the versioning/publish workflow (with this repo as an example), see DOCUMENTATION.md.

Development Workflow

This project uses Changesets for version management and automated publishing.

Making Changes

1. Create a feature branch:

   git checkout -b feature/your-feature-name

2. Make your changes and test them locally:

   npm run lint    # Type check
   npm run build   # Build the package

3. Create a changeset before merging:

   npx changeset

   • Select the version bump type (patch, minor, or major)
   • Write a description of your changes
   • This creates a file in .changeset/ directory

4. Commit and push:

   git add .
   git commit -m "Your commit message"
   git push origin feature/your-feature-name

5. Open a Pull Request on GitHub

Publishing Process

When your PR is merged to main:

1. CI runs automatically - Lints and builds your code
2. Publish workflow detects changesets - If changesets exist, it creates a "Version Packages" PR
3. Review and merge the Version PR - This will:
   • Bump the version in package.json
   • Update CHANGELOG.md
   • Create a git tag
   • Automatically publish to npm

First Time Setup (for maintainers)

To enable automatic publishing, set up the NPM_TOKEN secret in GitHub:

1. Go to your npm account: https://www.npmjs.com/settings/YOUR_USERNAME/tokens
2. Create a new token (type: "Automation")
3. In your GitHub repo: Settings → Secrets and variables → Actions
4. Add a new secret named NPM_TOKEN with your npm token

License

MIT

Contributing

Contributions are welcome! Feel free to open an issue or submit a pull request.