npm package: @salvadorlimones/sparkle
Description: A package that makes your code sparkle
Latest version: 1.0.7

# ✨ sparkle

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

## Installation

```bash
npm install sparkle
```

## Usage

```tsx
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

```tsx
<Sparkle>Hello World!</Sparkle>
```

### Custom Count

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

### Custom Color

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

### Custom Size

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

### Combined Customization

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

### With Buttons

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

### With Headings

```tsx
<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](./DOCUMENTATION.md)**.

## Development Workflow

This project uses [Changesets](https://github.com/changesets/changesets) for version management and automated publishing.

### Making Changes

1. **Create a feature branch:**
   ```bash
   git checkout -b feature/your-feature-name
   ```

2. **Make your changes** and test them locally:
   ```bash
   npm run lint    # Type check
   npm run build   # Build the package
   ```

3. **Create a changeset** before merging:
   ```bash
   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:**
   ```bash
   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.