OiiaJS

A fun React component that renders animated cats with sound effects floating all over the screen. Perfect for adding some feline chaos to your React application as an easter egg or celebration effect!

Installation

npm install oiiajs
# or
yarn add oiiajs

Usage

Basic Usage

import React from 'react';
import { CatInvasion } from 'oiiajs';

function App() {
  return (
    <div className="App">
      <h1>My Awesome App</h1>
      {/* Add the cat invasion component */}
      <CatInvasion />
      
      {/* Your other content */}
    </div>
  );
}

export default App;

Customization

You can customize the cat invasion with various props:

import React, { useRef } from 'react';
import { CatInvasion } from 'oiiajs';

function App() {
  const catInvasionRef = useRef();
  
  const handleToggleCats = () => {
    // Access methods via ref
    catInvasionRef.current.toggle();
  };
  
  const handleAddMoreCats = () => {
    // Add 50 more cats
    catInvasionRef.current.addCats(50);
  };
  
  return (
    <div className="App">
      <h1>My Awesome App</h1>
      
      <button onClick={handleToggleCats}>Toggle Cats</button>
      <button onClick={handleAddMoreCats}>Add More Cats!</button>
      
      <CatInvasion 
        count={128} // Number of cats (default: 256)
        minSize={64} // Minimum cat size in pixels (default: 64)
        maxSize={300} // Maximum cat size in pixels (default: 600)
        autoStart={true} // Start automatically (default: true)
        playSound={true} // Play the "oiia" sound (default: true)
        enableBackgroundEffect={true} // Enable strobing gradient background (default: true)
        backgroundAnimationSpeed={10} // Speed of background animation (default: 10)
        defaultAnimationState="random" // Default animation state (default: "random")
        maxCats={512} // Maximum number of cats (default: 512)
        customImages={[
          // Optional: provide your own cat images
          'https://example.com/cat1.jpg',
          'https://example.com/cat2.jpg',
        ]}
        ref={catInvasionRef}
      />
    </div>
  );
}

export default App;

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | count | number | 256 | Initial number of cats to display | | minSize | number | 64 | Minimum size of cats in pixels | | maxSize | number | 600 | Maximum size of cats in pixels | | autoStart | boolean | true | Whether to start the invasion automatically | | customImages | string[] | [] | Array of custom image URLs to use instead of default cats | | playSound | boolean | true | Whether to play the "oiia" sound | | enableBackgroundEffect | boolean | true | Whether to enable the strobing gradient background effect | | backgroundAnimationSpeed | number | 10 | Speed of the background animation (1-20) | | defaultAnimationState | string | "random" | Default animation state for cats | | maxCats | number | 512 | Maximum number of cats allowed |

Animation States

The following animation states are available:

• "floating" - Cats float around the screen
• "stationary" - Cats stay in place
• "spinning" - Cats spin around
• "scaling" - Cats grow and shrink
• "scaleFloat" - Cats float and scale
• "pulse" - Cats pulse in and out
• "bounce" - Cats bounce up and down while scaling
• "wobble" - Cats wobble and rotate while scaling
• "flip" - Cats flip around the Y-axis with 3D perspective
• "random" - Randomly selects one of the above animations for each cat

Methods

The following methods are available via ref:

• start() - Start the cat invasion
• stop() - Stop the cat invasion
• toggle() - Toggle the cat invasion on/off
• addCats(count) - Add more cats to the invasion (default: 50)
• isActive - Boolean indicating if the invasion is active

License

MIT