1.0.0 • Published 4 months ago

naughtydev v1.0.0

Weekly downloads
-
License
MIT
Repository
github
Last release
4 months ago

🌈 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!

NaughtyDev Demo

✨ 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

PropTypeDescription
slackWebhookUrlstringYour Slack webhook URL
channelNamestringTarget Slack channel
buttonTextstringCustom button text
headerTextstringModal header text
descriptionTextstringFeedback form description
submitTextstringSubmit 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