WavyJS - React UI Components & Hooks Library

A comprehensive React + TypeScript component and hooks library with Tailwind CSS, Framer Motion, and GSAP animations. DOCS

🚀 Features

• UI Components: Beautiful, customizable components including buttons and animated backgrounds, Icons
• Custom Hooks: Useful React hooks for common functionality
• Animation Ready: Built with GSAP and Framer Motion for smooth animations
• TypeScript: Full TypeScript support with proper type definitions
• Tailwind CSS: Modern utility-first CSS framework
• Zero Dependencies: Only peer dependencies, no bundle bloat

📦 Installation

npm install wavyjs

🔧 Peer Dependencies

Make sure you have these installed in your project:

npm install react react-dom framer-motion gsap

🎯 Components

Background Components

FadingBG

Animated dots that fade in and out across the entire screen.

import { FadingBG } from 'wavyjs';

<FadingBG />

GithubBG

Matrix-style animated background with blinking boxes.

import { GithubBG } from 'wavyjs';

<GithubBG />

AnimatedBG

Floating colored circles with smooth animations.

import { AnimatedBG } from 'wavyjs';

<AnimatedBG />

MaskedBG

Advanced masked background with animated grid patterns.

import { MaskedBG } from 'wavyjs';

<MaskedBG />

Icons

Animated React logo with customizable size and color, featuring rotating ellipses and a moving circle.

import { ReactIcon } from 'wavyjs';

// Basic usage
<ReactIcon />

// Custom size and color
<ReactIcon size={300} color="#ff6b6b" />

// Available props
<ReactIcon 
  size={200}     // Default: 200
  color="cyan"   // Default: "cyan"
/>

Props:

• size: number - Icon size in pixels (default: 200)
• color: string - Color for both the logo ellipses and moving circle (default: "cyan")

🪝 Hooks

useCursor

Track mouse cursor position.

import { useCursor } from 'wavyjs';

const { x, y } = useCursor();

useFetch

Simplified data fetching hook.

import { useFetch } from 'wavyjs';

const { data, loading, error } = useFetch('https://api.example.com/data');

useHover

Track hover state with event handlers.

import { useHover } from 'wavyjs';

const [isHovered, eventHandlers] = useHover();

<div {...eventHandlers}>
  {isHovered ? 'Hovering!' : 'Not hovering'}
</div>

useSessionTimeout

Session timeout management with warning support.

import { useSessionTimeout } from 'wavyjs';

useSessionTimeout({
  timeout: 300000, // 5 minutes
  onTimeout: () => logout(),
  warningTime: 60000, // 1 minute warning
  onWarning: () => showWarning(),
});

useSpeechSynthesis

Text-to-speech functionality.

import { useSpeechSynthesis } from 'wavyjs';

const { speak, stop } = useSpeechSynthesis();

speak('Hello, world!', { rate: 0.8, pitch: 1.2 });
stop(); // Stop current speech

useToggle

Simple boolean toggle hook.

import { useToggle } from 'wavyjs';

const [isOpen, toggle] = useToggle(false);

<button onClick={toggle}>
  {isOpen ? 'Close' : 'Open'}
</button>

🎨 Styling

All components use Tailwind CSS classes and are fully customizable. You can override styles by passing className props or modifying the component source.

📱 Responsive Design

Components are built with responsive design in mind and work seamlessly across all device sizes.

🔄 Animation

• GSAP: Used for complex animations and timeline control
• Framer Motion: Provides smooth component transitions and motion
• CSS Transitions: Fallback animations for better performance

🚀 Getting Started

1. Install the package:

   npm install wavyjs

2. Import components:

   import { Button, FadingBG, useCursor } from 'wavyjs';

3. Use in your app:

   function App() {
     const { x, y } = useCursor();
        
     return (
       <div>
         <FadingBG />
         <Button variant="primary">Hello WavyJS!</Button>
         <p>Cursor: {x}, {y}</p>
       </div>
     );
   }

📋 Requirements

• React 18.2.0+
• React DOM 18.2.0+
• Framer Motion 11.0.0+
• GSAP 3.12.0+
• Node.js 18+

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

📄 License

This project is licensed under the MIT License.

🆘 Support

If you encounter any issues or have questions, please open an issue on GitHub.

Built with ❤️ by Adesh Ingale