📖 Documentation

🚀 Quick Usage Example

import { Soundz, SoundzProvider } from 'soundz';

<SoundzProvider theme="pastel" tooltipPosition="bottom">
  <Soundz providedFX="pop" keyboardKey="Enter">
    🔊 Play Pop
  </Soundz>
</SoundzProvider>

🎛 Available Props

• providedFX: [string] — Name of predefined sound (default: boop)
• customFX: [string] — URL to MP3 file
• hoverFX: [string] — Sound to play on hover (Use SoundzProvider for this feature)
• noClickSound: [boolean] — Disable sound on click (ex: Hover Sound Only)
• fetchCooldown: [number] — Delay before re-fetching same sound (ms)
• clickCooldown: [number] — Debounce clicking sound effect (ms)
• keyboardKey: [string] — Trigger sound with key press
• enableHaptics: [boolean] — Vibrate on click if supported
• showTooltip: [boolean] — Show text when sound plays
• tooltipText: [string] — Text shown in tooltip
• tooltipPosition: top | bottom | left | right
• tooltipAnimation: fade | scale | slide
• animationSpeed: [string] — Pulse animation speed
• icon: [object] — Select animated icon (speaker, waves, audioWaves, audioLines, trophy) or omit prop for no icon
• theme: auto | light | dark | neon | pastel | mono
• customTheme: [object] - Declare your own theme and merge/override the defaults (ex: customTheme={{tooltipBg: '#ff1493', tooltipColor: '#ffffff', pulseColor: '#ff1493'}})
• className: [string] — CSS class for wrapper
• style: [CSSProperties] — Inline styles for wrapper
• layout: [string] — CSS layout (e.g. "inline-flex")
• wrap: [string] — Custom CSS class or style block
• loading: [( ) => ReactNode] — Optional loading state component
• apiBaseUrl: [string] — Override the base API URL for sound fetches

💯 Available Icons

{ name: (REQUIRED), size: (OPTIONAL - default=20), strokeWidth: (OPTIONAL - default=2.5) }

🎧 Provided Sounds

License

MIT © 2025 Kaycee Ingram