0.1.9 • Published 1 year ago

clickfusion v0.1.9

Weekly downloads
-
License
MIT
Repository
github
Last release
1 year ago

ClickFusion

Version Downloads GitHub issues GitHub pull requests License

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

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

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.

0.1.8

1 year ago

0.1.9

1 year ago

0.1.7

2 years ago

0.1.69

2 years ago

0.1.68

2 years ago

0.1.67

2 years ago

0.1.66

2 years ago

0.1.65

2 years ago

0.1.64

2 years ago

0.1.63

2 years ago

0.1.62

2 years ago

0.1.61

2 years ago

0.1.6

2 years ago

0.1.58

2 years ago

0.1.57

2 years ago

0.1.56

2 years ago

0.1.55

2 years ago

0.1.54

2 years ago

0.1.53

2 years ago

0.1.52

2 years ago

0.1.51

2 years ago

0.1.5

2 years ago

0.1.4-8.2

2 years ago

0.1.471

2 years ago

0.1.48

2 years ago

0.1.47

2 years ago

0.1.46

2 years ago

0.1.44

2 years ago

0.1.43

2 years ago

0.1.42

2 years ago

0.1.41

2 years ago

0.1.4

2 years ago

0.1.39

2 years ago

0.1.38

2 years ago

0.1.37

2 years ago

0.1.36

2 years ago

0.1.35

2 years ago

0.1.34

2 years ago

0.1.33

2 years ago

0.1.32

2 years ago

0.1.31

2 years ago

0.1.3

2 years ago

0.1.29

2 years ago

0.1.28

2 years ago

0.1.27

2 years ago

0.1.26

2 years ago

0.1.25

2 years ago

0.1.24

2 years ago

0.1.23

2 years ago

0.1.22

2 years ago

0.1.21

2 years ago

0.1.2

2 years ago

0.1.19

2 years ago

0.1.18

2 years ago

0.1.17

2 years ago

0.1.16

2 years ago

0.1.15

2 years ago

0.1.14

2 years ago

0.1.13

2 years ago

0.1.12

2 years ago

0.1.11

2 years ago

0.1.1

2 years ago

0.1.0

2 years ago