My React UI Components

A modern, customizable React UI components library designed to simplify web development. This library provides a comprehensive set of reusable components with built-in functionality for various input types, containers, and tab navigation.

Features

• 🎨 Modern and responsive design
• 📱 Multiple input types (Text, Select, Date, Number, Phone, Email)
• 🧩 Customizable components with extensive props
• 🎯 Built with React 18 for optimal performance
• 🔧 Easy to integrate and use
• 📚 Comprehensive documentation
• 🎭 Tab navigation with rich features (labels, titles, descriptions, badges, icons)
• 🛠️ Type-safe components

Quick Start

1# Install the main package
2npm install px-react-ui-components
3
4# Install required peer dependencies
5npm install react@^18.3.1 react-dom@^18.3.1 katex@^0.16.21 quill@^1.3.7 quill-image-resize-module-react@^3.0.0 quill-table-ui@^1.0.7 react-confirm-alert@^3.0.6 react-icons@^5.5.0 react-image-crop@^11.0.7 react-loader-spinner@^6.1.6 react-zoom-pan-pinch@^3.7.0

Peer Dependencies

This library requires the following peer dependencies to be installed in your project:

1{
2  "react": "^18.3.1",
3  "react-dom": "^18.3.1",
4  "katex": "^0.16.21",
5  "quill": "^1.3.7",
6  "quill-image-resize-module-react": "^3.0.0",
7  "quill-table-ui": "^1.0.7",
8  "react-confirm-alert": "^3.0.6",
9  "react-icons": "^5.5.0",
10  "react-image-crop": "^11.0.7",
11  "react-loader-spinner": "^6.1.6",
12  "react-zoom-pan-pinch": "^3.7.0"
13}

Available Components

The library includes the following components:

• MyAlert :
• MyEditor :
• MyFileUpload :
• MyImageCropper :
• MyMaps :
• MyMenu :
• MyModal :
• MyNotFound :
• MyScrollableCard :
• MyTable :
• MyWaiting :
• MyZoomImage :
• MyInput: A versatile input component supporting multiple types:
  • TEXT
  • PASSWORD
  • SELECT
  • SELECTFILTER
  • FILE
  • IMAGE
  • TEXTAREA
  • COLOR
  • READONLY
  • DATE
  • DATETIME
  • TIME
  • MONEY
  • NUMBER
  • MAIL
  • PHONE
• MyContainer: A flexible container component
• MyTabs: Advanced tab navigation with rich features

Usage

Import components as needed:

1import { MyInput, MyContainer, MyTabs, MyTabPane, MyInputType } from 'px-react-ui-components';
2
3// Example usage
4function App() {
5  return (
6    <MyContainer>
7      <MyInput type={MyInputType.TEXT} value={param} onChange={() => setParam(e.value)} placeholder="Enter text" />
8      <MyInput type={MyInputType.SELECT} value={param} onChange={() => setParam(e.value)} placeholder="Enter text" />
9      <MyInput type={MyInputType.DATE} value={param} onChange={() => setParam(e.value)} placeholder="Enter text" />
10      <MyInput type={MyInputType.NUMBER} value={param} onChange={() => setParam(e.value)} placeholder="Enter text" />
11      <MyInput type={MyInputType.PHONE} value={param} onChange={() => setParam(e.value)} placeholder="Enter text" />
12      <MyInput type={MyInputType.MAIL} value={param} onChange={() => setParam(e.value)} placeholder="Enter text" />
13
14      <MyTabs>
15        <MyTabPane label="Tab 1" title="" description="" badge="" icon="" className="">Content for Tab 1</MyTabPane>
16        <MyTabPane label="Tab 2" title="" description="" badge="" icon="" className="">Content for Tab 2</MyTabPane>
17      </MyTabs>
18    </MyContainer>
19  );
20}

Development

To build the project:

1npm run build

This will compile the source files from src to dist directory.

License

MIT © Piri AYKUT

Author

Piri AYKUT | piriaykut@gmail.com