React Note Components

A collection of React components for building note-taking applications with a modern, clean UI.

Features

• NoteCard: A versatile component for displaying and editing notes
• Toast: A customizable notification component for displaying messages

Installation

Install the package using npm:

npm install note-taking-components-v2

Or using yarn:

yarn add note-taking-components-v2

Usage

NoteCard

The NoteCard component is used to display and edit individual notes.

import { NoteCard } from 'react-note-components';
import { Note } from 'react-note-components/types';

const note: Note = {
  id: '1',
  content: 'This is a sample note',
  updatedAt: new Date().toISOString(),
};

function App() {
  const handleUpdate = (id: string, content: string) => {
    // Update the note in your state or database
  };

  const handleDelete = (id: string) => {
    // Delete the note from your state or database
  };

  return (
    <NoteCard
      note={note}
      onUpdate={handleUpdate}
      onDelete={handleDelete}
    />
  );
}

Toast

The Toast component is used to display temporary notifications.

import { useState } from 'react';
import { Toast, ToastType } from 'react-note-components';

function App() {
  const [showToast, setShowToast] = useState(false);

  const handleShowToast = () => {
    setShowToast(true);
  };

  const handleCloseToast = () => {
    setShowToast(false);
  };

  return (
    <div>
      <button onClick={handleShowToast}>Show Toast</button>
      {showToast && (
        <Toast
          message="This is a success message!"
          type="success"
          onClose={handleCloseToast}
        />
      )}
    </div>
  );
}

API Reference

NoteCard

interface NoteCardProps {
  note: Note;
  onUpdate: (id: string, content: string) => void;
  onDelete: (id: string) => void;
}

interface Note {
  id: string;
  content: string;
  updatedAt: string;
}

• note: The note object to be displayed
• onUpdate: Function called when the note is updated
• onDelete: Function called when the note is deleted

Toast

interface ToastProps {
  message: string;
  type: ToastType;
  onClose: () => void;
  duration?: number;
}

type ToastType = 'success' | 'error' | 'info';

• message: The message to be displayed in the toast
• type: The type of toast (success, error, or info)
• onClose: Function called when the toast is closed
• duration: Duration in milliseconds before the toast auto-closes (default: 5000)

Styling

This package uses Tailwind CSS for styling. Make sure to include Tailwind CSS in your project for the components to be styled correctly.

Dependencies

• React 16.8+
• Tailwind CSS 2.0+
• lucide-react

Contributing

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

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

License

This project is licensed under the MIT License.

Support

If you have any questions or need help using the package, please open an issue in the GitHub repository.