ClickFusion

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

Table of Contents

• Setting up ClickFusion
  • Installation
  • Running the Development Server
  • Quick Example
• Comprehensive Example
• Features
  • Customizable Effects
  • Type Safety
• Contributing
• License

Setting up ClickFusion

Installation

You can install ClickFusion using:

Using npm

npm i clickfusion

Running the Development Server

After installation, you can run your development server:

npm run dev

bun add clickfusion

Running the Development Server

After installation, you can run your development server:

bun run dev

yarn add clickfusion

Running the Development Server

After installation, you can run your development server:

yarn dev

pnpm add clickfusion

Running the Development Server

After installation, you can run your development server:

pnpm dev

This will usually start your development server on port 3000. Open 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:

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.

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

Type Safety

Our TypeScript support ensures a robust and type-safe development experience. Learn More

Contributing

Feel free to dive into our GitHub repository to explore the code and contribute.

License

This project is licensed under the MIT License.