Package Exports

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (naughtydev) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

🌈 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

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

Made with 💜 by mattbratos