🌈 NaughtyDev

A delightfully playful React component for collecting user feedback and sending it directly to Slack. Perfect for websites that want to add a touch of fun to their feedback process!

✨ Features

• 🎨 Two stunning button styles: Classic and Crazy
• 🔄 Seamless Slack integration
• 🎮 Pixel-perfect retro aesthetics
• 📱 Fully responsive design
• 🌙 Dark mode support
• ⚡ Zero-config setup

🚀 Installation

# Using npm
npm install naughtydev

# Using yarn
yarn add naughtydev

# Using pnpm
pnpm add naughtydev

# Using bun
bun add naughtydev

🎮 Quick Start

import { FeedbackButton } from 'naughtydev';

function App() {
  return (
    <FeedbackButton 
      slackWebhookUrl={process.env.NEXT_PUBLIC_SLACK_WEBHOOK_URL}
      channelName="Website Feedback"
    />
  );
}

🎨 Button Variants

Classic Button

<FeedbackButton
  slackWebhookUrl={process.env.NEXT_PUBLIC_SLACK_WEBHOOK_URL}
  channelName="Website Feedback"
/>

Crazy Button (for the adventurous!)

<FeedbackButton
  buttonText="🌈 GIMME FEEDBACK! 🦄"
  headerText="✨ Tell Me Something WILD! ✨"
  descriptionText="Go totally BONKERS! 🎪🎢🎡"
  submitText="🚀 BLAST OFF! 💥"
  variant="crazy"
  slackWebhookUrl={process.env.NEXT_PUBLIC_SLACK_WEBHOOK_URL}
  channelName="Crazy Feedback"
/>

⚙️ Configuration Options

| Prop | Type | Description | |------|------|-------------| | slackWebhookUrl | string | Your Slack webhook URL | | channelName | string | Target Slack channel | | buttonText | string | Custom button text | | headerText | string | Modal header text | | descriptionText | string | Feedback form description | | submitText | string | Submit button text | | variant | 'default' \| 'crazy' | Button style variant | | size | 'default' \| 'sm' \| 'lg' | Button size |

🔒 Security Note

Never expose your Slack webhook URL in client-side code. Always use environment variables and proper server-side handling.

🛠️ Development

1. Clone the repository
2. Install dependencies: pnpm install
3. Start the development server: pnpm dev
4. Visit http://localhost:3000

🤝 Contributing

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

📝 License

MIT © [Your Name]

Made with 💜 by mattbratos