Quick Edit - React Component Library

A beautiful React component built with Mantine UI library, featuring a counter and form example with full TypeScript support.

🚀 Features

• ⚛️ React 18+ - Latest React with concurrent features
• 🎨 Mantine 8 - Beautiful React components library
• 📱 Responsive Design - Built-in responsive utilities
• 🎯 TypeScript - Full type safety with exported types
• 🔧 Customizable - Props for customization and theming
• 📦 NPM Package - Ready to install and use

📦 Installation

npm install @pablituuu/quick-edit
# or
yarn add @pablituuu/quick-edit
# or
pnpm add @pablituuu/quick-edit

🎯 Usage

Basic Usage

import { QuickEdit } from '@pablituuu/quick-edit';

function App() {
  return (
    <QuickEdit 
      title="My Custom Title"
      initialCount={5}
      onSubmit={(data) => console.log('Form submitted:', data)}
      onCountChange={(count) => console.log('Count changed:', count)}
    />
  );
}

With Custom Theme

import { QuickEdit } from '@pablituuu/quick-edit';

function App() {
  return (
    <QuickEdit 
      theme={{
        primary: 'blue',
        secondary: 'green'
      }}
    />
  );
}

With Custom Styling

import { QuickEdit } from '@pablituuu/quick-edit';

function App() {
  return (
    <QuickEdit 
      className="my-custom-class"
      style={{ backgroundColor: '#f5f5f5' }}
    />
  );
}

🔧 Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | title | string | "🚀 Mantine + Vite + React" | Custom title for the component | | initialCount | number | 0 | Initial value for the counter | | theme | object | {} | Custom theme colors | | onSubmit | function | undefined | Callback when form is submitted | | onCountChange | function | undefined | Callback when count changes | | className | string | undefined | Custom CSS class name | | style | object | undefined | Custom inline styles |

📁 Project Structure

src/
├── QuickEdit.tsx        # Main component
├── types.ts             # TypeScript type definitions
├── index.ts             # Library entry point
├── App.tsx              # Demo app
└── main.tsx             # App entry point

🎨 Styling

The component uses Mantine's styling system. You can customize it by:

1. Using Mantine theme provider in your app
2. Overriding CSS variables for custom colors
3. Using the theme prop for component-specific customization
4. Adding custom className and style props

🔧 Development

Prerequisites

• Node.js 18+
• pnpm (recommended) or npm

Setup

# Install dependencies
pnpm install

# Start development server
pnpm dev

# Build library
pnpm build:lib

# Build demo app
pnpm build

Publishing

# Build the library
pnpm build:lib

# Publish to npm
npm run publish

📚 Dependencies

• @mantine/core - UI component library
• @mantine/hooks - Useful React hooks
• @tabler/icons-react - Beautiful icons
• React 18+ - React framework

🤝 Contributing

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

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🔗 Links

• Mantine Documentation
• React Documentation
• NPM Package