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.
You can install ClickFusion using:
Using npm
npm i clickfusionAfter installation, you can run your development server:
npm run devUsing bun
bun add clickfusionAfter installation, you can run your development server:
bun run devUsing yarn
yarn add clickfusionAfter installation, you can run your development server:
yarn devUsing pnpm
pnpm add clickfusionAfter installation, you can run your development server:
pnpm devThis will usually start your development server on port 3000. Open http://localhost:3000 in your web browser to see your app.
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>
);
}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>
);
}ClickFusion is highly customizable. Whether you're looking to change particle images, sizes, or speeds, we've got you covered. Learn More
Our TypeScript support ensures a robust and type-safe development experience. Learn More
Feel free to dive into our GitHub repository to explore the code and contribute.
This project is licensed under the MIT License.