1.0.0 • Published 4 months ago
naughtydev v1.0.0
🌈 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
- Clone the repository
- Install dependencies:
pnpm install
- Start the development server:
pnpm dev
- Visit
http://localhost:3000
🤝 Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
📝 License
MIT © Your Name
Made with 💜 by mattbratos
1.0.0
4 months ago