Package Exports

@pablituuu/quick-edit

Readme

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:

Using Mantine theme provider in your app
Overriding CSS variables for custom colors
Using the theme prop for component-specific customization
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

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

📄 License

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

JSPM

@pablituuu/quick-edit