@skrekliam/feedback

A React component for collecting and managing user feedback with voting capabilities.

Installation

npm install @skrekliam/feedback

Features

• 🎯 Simple feedback submission
• ⬆️ Upvoting system
• 📊 Automatic sorting by votes
• 🔒 Email privacy (masking)
• 🎨 Tailwind CSS styling
• ✨ TypeScript support
• 💾 Database agnostic - works with any storage solution
• 👤 Anonymous posting support
• 📧 Built-in email masking utility

Database Flexibility

This package is designed to be database agnostic. You handle all data persistence logic externally through the provided callbacks:

• onFeedbackCreate: Receives the feedback message and lets you implement your own storage logic (SQL, NoSQL, localStorage, etc.)
• onVote: Receives the feedback ID for vote handling, allowing you to update your storage solution as needed

Example with Different Databases

MongoDB Example

const handleFeedbackCreate = async (message: string) => {
  const feedback = await mongodb.collection("feedbacks").insertOne({
    message,
    votes: 0,
    user: getCurrentUser(), // your auth logic
  });
  return feedback;
};

PostgreSQL Example using Prisma

const handleFeedbackCreate = async (message: string) => {
  const feedback = await prisma.feedback.create({
    data: {
      message,
      votes: 0,
      userId: getCurrentUserId(),
    },
  });
  return feedback;
};

LocalStorage Example

const handleFeedbackCreate = async (message: string) => {
  const feedback = {
    id: Date.now().toString(),
    message,
    votes: 0,
    user: {
      email: "[email protected]",
    },
  };
  const feedbacks = JSON.parse(localStorage.getItem("feedbacks") || "[]");
  localStorage.setItem("feedbacks", JSON.stringify([...feedbacks, feedback]));
  return feedback;
};

Usage

import { FeedbackModule } from "@skrekliam/feedback";

function App() {
  // Handler for creating new feedback
  const handleFeedbackCreate = async (message: string) => {
    // Implement your feedback creation logic here
    return {
      id: "unique-id",
      message,
      votes: 0,
      hasVoted: false,
      user: {
        email: "[email protected]",
        name: "John Doe", // optional
      },
    };
  };

  // Handler for voting on feedback
  const handleVote = async (feedbackId: string) => {
    // Implement your voting logic here
  };

  return (
    <FeedbackModule
      onFeedbackCreate={handleFeedbackCreate}
      onVote={handleVote}
      initialFeedbacks={[]} // Optional: Pre-populate with existing feedback
    />
  );
}

Props

| Prop | Type | Description | |------|------|-------------| | onFeedbackCreate | (message: string) => Promise<Feedback> | Callback function called when new feedback is submitted | | onVote | (feedbackId: string) => Promise<void> | Callback function called when a vote is cast | | initialFeedbacks | Feedback[] | Optional array of initial feedback items |

Types

interface Feedback {
  id: string;
  message: string;
  votes: number;
  hasVoted?: boolean;
  name?: string;
}

interface FeedbackModuleProps {
  onFeedbackCreate: (message: string) => Promise<Feedback>;
  onVote: (feedbackId: string) => Promise<void>;
  initialFeedbacks?: Feedback[];
}

Utility Functions

Email Masking

The package includes a built-in email masking utility:

import { maskEmail } from "@skrekliam/feedback";

const maskedEmail = maskEmail("[email protected]"); // Returns "u***[email protected]"

Styling

The component comes with built-in Tailwind CSS classes. Make sure your project includes Tailwind CSS to maintain the default styling, or override the classes as needed.

Development

Install dependencies

npm install

Build the package

npm run build

Watch mode during development

npm run dev

Requirements

Peer Dependencies

• React ≥ 18.0.0
• React DOM ≥ 18.0.0

License

MIT

Author

skrekliam