# clickfusion

> Easy click fusion button effects with multiple styles and effects.

Latest version **0.1.9** (published 2024-05-29) · MIT license · 0 weekly downloads

## Install

```sh
npm install clickfusion
pnpm add clickfusion
yarn add clickfusion
bun add clickfusion
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.9 |
| Published | 2024-05-29 |
| First published | 2023-09-25 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 100.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 8 |
| Author | BankkRoll |
| Maintainers | bankkroll |
| Keywords | react, button, effects, UI, click, fusion |

## Links

- npm: https://www.npmjs.com/package/clickfusion
- Repository: https://github.com/BankkRoll/ClickFusion
- Homepage: https://clickfusion.mintlify.app
- Issues: https://github.com/BankkRoll/ClickFusion/issues
- npm.io page: https://npm.io/package/clickfusion

## Dependencies (3)

- [react](https://npm.io/package/react.md) ^18.2.0
- [canvas](https://npm.io/package/canvas.md) ^2.11.2
- [react-dom](https://npm.io/package/react-dom.md) ^18.2.0

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.1.9 (latest) — 2024-05-29
- 0.1.8 — 2024-05-29
- 0.1.7 — 2023-09-29
- 0.1.69 — 2023-09-29
- 0.1.68 — 2023-09-29
- 0.1.67 — 2023-09-29
- 0.1.66 — 2023-09-29
- 0.1.65 — 2023-09-29
- 0.1.64 — 2023-09-28
- 0.1.63 — 2023-09-28
- 0.1.62 — 2023-09-28
- 0.1.61 — 2023-09-28
- 0.1.6 — 2023-09-27
- 0.1.58 — 2023-09-27
- 0.1.57 — 2023-09-27
- … 48 more at https://npm.io/package/clickfusion/versions

## README

# ClickFusion
![Version](https://img.shields.io/npm/v/clickfusion?style=plastic&logo=npm&cacheSeconds=3600&link=https%3A%2F%2Fwww.npmjs.com%2Fpackage%2Fclickfusion)
![Downloads](https://img.shields.io/npm/dt/clickfusion?style=plastic)
![GitHub issues](https://img.shields.io/github/issues/BankkRoll/ClickFusion?style=plastic)
![GitHub pull requests](https://img.shields.io/github/issues-pr/BankkRoll/ClickFusion?style=plastic)
![License](https://img.shields.io/npm/l/clickfusion?style=plastic)

Welcome to ClickFusion, your go-to library for interactive button effects! This npm package simplifies adding particle effects to your buttons, links, divs or other DOMs. Offering a React functional component to make your UI interactive and delightful.

## Quick Links

<div style="display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;">
  <a href="https://github.com/BankkRoll/ClickFusion" style="text-decoration: none;">
  <kbd> <br> GitHub Repo <br> </kbd>
  </a>
  
  <a href="https://www.npmjs.com/package/clickfusion" style="text-decoration: none;">
  <kbd> <br> NPM Package <br> </kbd>
  </a>
  
  <a href="https://clickfusion.mintlify.app/" style="text-decoration: none;">
  <kbd> <br> Live Docs <br> </kbd>
  </a>
</div>

## Table of Contents

- [Setting up ClickFusion](#setting-up-clickfusion)
  - [Installation](#installation)
  - [Running the Development Server](#running-the-development-server)
  - [Quick Example](#quick-example)
- [Comprehensive Example](#comprehensive-example)
- [Features](#features)
  - [Customizable Effects](#customizable-effects)
  - [Type Safety](#type-safety)
- [Contributing](#contributing)
- [License](#license)

## Setting up ClickFusion

### Installation

You can install ClickFusion using:

  Using npm
  
  ```bash
  npm i clickfusion
  ```
  
  #### Running the Development Server
  After installation, you can run your development server:
  
  ```bash
  npm run dev
  ```
  

<details>
  <summary>Using bun</summary>
  
  ```bash
  bun add clickfusion
  ```
  
  #### Running the Development Server
  After installation, you can run your development server:
  
  ```bash
  bun run dev
  ```
  
</details>

<details>
  <summary>Using yarn</summary>
  
  ```bash
  yarn add clickfusion
  ```
  
  #### Running the Development Server
  After installation, you can run your development server:
  
  ```bash
  yarn dev
  ```
  
</details>

<details>
  <summary>Using pnpm</summary>
  
  ```bash
  pnpm add clickfusion
  ```
  
  #### Running the Development Server
  After installation, you can run your development server:
  
  ```bash
  pnpm dev
  ```
  
</details>

This will usually start your development server on port 3000. Open [http://localhost:3000](http://localhost:3000) in your web browser to see your app.

### Quick Example

Here's a simple example of how to use ClickFusion in your React application:

```tsx
import { ClickFusion } from 'clickfusion';

export default function App() {
  return (
    <ClickFusion effect="coolmode">
      <button>
        Click Me!
      </button>
    </ClickFusion>
  );
}
```

## Comprehensive Example

Below is an example that demonstrates the usage of all three effects (`coolmode`, `rainmode`, `partymode`, `confettimode`, `codemode`, `dragmode`) with full property customization.

```tsx
import { ClickFusion } from 'clickfusion';

export default function App() {
  return (
    <div>
      {/* Using coolmode effect */}
      <ClickFusion 
        effect="coolmode"
        particleOptions={{
          particle: 'customParticleURL', // Optional: string
          size: 40, // Optional: number
          speedHorz: 5, // Optional: number
          speedUp: 10 // Optional: number
        }}
      >
        <button>
          Click Me for Cool Effect!
        </button>
      </ClickFusion>
      
      {/* Using rainmode effect */}
      <ClickFusion
        effect="rainmode"
        particleOptions={{
          particle: 'customParticleURL', // Optional: string
          size: 50, // Optional: number
          speedDown: 5, // Optional: number
          particleCount: 30 // Optional: number
        }}
      >
        <button>
          Click Me for Rain Effect!
        </button>
      </ClickFusion>
      
      {/* Using partymode effect */}
      <ClickFusion
        effect="partymode"
        particleOptions={{
          size: 20, // Optional: number
          particleCount: 45 // Optional: number
        }}
      >
        <button>
          Click Me for Party Effect!
        </button>
      </ClickFusion>

      {/* Using confettimode effect */}
      <ClickFusion 
        effect="confettimode"
        particleOptions={{
          particleCount: 200, // Optional: number
          speedDown: 5, // Optional: number
          color: 'rainbow' // Optional: 'rainbow' | 'red' | 'orange' | 'yellow' | 'green' | 'blue' | 'purple'
        }}
      >
        <button>
          Click Me for Confetti Effect!
        </button>
      </ClickFusion>

      {/* Using codemode effect */}
      <ClickFusion 
        effect="codemode"
        particleOptions={{
          particleCount: 30, // Optional: number
          speedDown: 5, // Optional: number
          color: 'light' // Optional: 'light' | 'dark'
        }}
      >
        <button>
          Click Me for Code Effect!
        </button>
      </ClickFusion>

      {/* Using dragmode effect */}
      <ClickFusion 
        effect="dragmode"
        particleOptions={{
          width: 300, // Optional: number
          height: 300, // Optional: number
          color: 'dark' // Optional: 'light' | 'dark' Transparent by default
        }}
      >
        <button>
          Click Me for Drag Effect!
        </button>
      </ClickFusion>
    </div>
  );
}
```

## Features

### Customizable Effects

ClickFusion is highly customizable. Whether you're looking to change particle images, sizes, or speeds, we've got you covered. [Learn More](https://clickfusion.mintlify.app/essentials/customEffects)

### Type Safety

Our TypeScript support ensures a robust and type-safe development experience. [Learn More](././src/types.d.ts)

## Contributing

Feel free to dive into our [GitHub repository](https://github.com/BankkRoll/ClickFusion) to explore the code and contribute.

## License

This project is licensed under the MIT License.

---
_Source: https://npm.io/package/clickfusion · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._