mui-dynamic-field
Version:
A dynamic and customizable input field component for React, built with Material UI & TypeScript.
81 lines (57 loc) • 2.06 kB
Markdown
# 📝 mui-dynamic-field
> **A dynamic and customizable input field component for React, built with Material UI & TypeScript.**
## 🚀 Features
✅ **Multiple Input Types** – `text`, `password`, `number`, `dropdown`, `date`, `time`, `checkbox`, etc.
✅ **Material UI Integration** – Uses MUI components for consistent design.
✅ **Customizable Props** – Control size, label, placeholder, validation rules, and more.
✅ **Validation Support** – Includes regex validation, min/max length, required fields, etc.
✅ **TypeScript Support** – Fully typed for better DX.
✅ **Lightweight & Performant** – Optimized for reusability and efficiency.
## 📦 Installation
Install via **npm** or **yarn**:
```sh
npm install mui-dynamic-field
# or
yarn add mui-dynamic-field
```
## 🔧 Usage Example
```tsx
import { DynamicField } from "mui-dynamic-field";
export default function Example() {
return (
<DynamicField
size="small"
color="primary"
item={{
_key="inputField"
placeholder="Input field"
fieldType="text"
}}
/>
);
}
```
## 🔗 Supported Input Types
| Type | Description |
| -------------- | ---------------------------------- |
| `text` | Standard text input field |
| `password` | Input field with visibility toggle |
| `number` | Numeric input field |
| `dropdown` | Select dropdown |
| `date` | Date picker |
| `time` | Time picker |
| `datetime` | Date and time picker |
| `checkbox` | Checkbox input |
| `autocomplete` | Autocomplete dropdown |
## 📜 License
MIT
## 🤝 Contributing
Contributions are welcome! Feel free to submit issues and pull requests.
## 📞 Support
For any issues or feature requests, please open an issue on [GitHub](https://github.com/yourusername/mui-dynamic-field/issues).