mha-react-components v1.0.1

🌟 mha-react-components

mha-react-components is a library that provides a set of customizable and reusable React components, including a DatePicker and Table component, to enhance your React applications.

📅 1. Date Picker Component

The DatePicker component offers an intuitive, interactive calendar for selecting dates. It supports various date formats, separators, and weekday display types, making it suitable for diverse use cases.

✨ Features

• Customizable Date Format: Formats like yyyy-mm-dd, dd-mm-yyyy, or dd-fullMonth-yyyy.
• Flexible Separators: Options such as -, /, ,, : for custom formats.
• Weekday Display Options: Display weekdays as long (e.g., Sunday), short (e.g., Sun), or narrow (e.g., S).
• Interactive Calendar: Effortless day, month, and year selection.
• Highlights Today's Date: Automatically highlights current and selected dates.
• Responsive Design: Optimized for mobile and desktop devices.

📦 Installation

Install mha-react-components via npm or yarn:

# Using npm
npm install mha-react-components

# Using yarn
yarn add mha-react-components


---

### 🚀 Usage

Here’s how you can use the `DatePicker` component in your project:

```tsx
import { DatePicker } from "mha-react-components";

const YourComponent = () => {
  const handleDateSelect = (selectedDate: string | Date) => {
    console.log("Selected Date:", selectedDate);
  };

  const handleClose = () => {
    console.log("DatePicker closed");
  };

  return (
    <DatePicker
      isOpen={true}
      onClose={handleClose}
      onDateSelect={handleDateSelect}
      value={"2024-11-30"}
      fromate="dd-mm-yyyy"
      dateSeparator="/"
      weekdayType="long"
    />
  );
};

⚙️ Props

📅 Date Format Types

• yyyy-mm-dd: 2024-11-30
• dd-mm-yyyy: 30-11-2024
• dd-fullMonth-yyyy: 30-November-2024
• day-dd-fullMonth-yyyy: Saturday, 30-November-2024
• day-dd-mm-yyyy: Saturday, 30-11-2024

🔗 Date Separator Options

Define separators for your date using the dateSeparator prop:

• - (default)
• /
• ,
• :
• (space)

🗓️ Weekday Format

Display weekday names using the weekdayType prop:

• long: Full name (e.g., Sunday).
• short: Abbreviated name (e.g., Sun).
• narrow: Single letter (e.g., S).

🛠️ 2. Table Component

The Table component is a highly customizable and responsive table for React applications. It offers features such as virtualized rendering, striped rows, hover effects, and dynamic column styling.

✨ Features

• Customizable Header and Body Styles: Define colors, font sizes, text alignment, and more.
• Hoverable and Striped Rows: Enhance readability and interactivity.
• Virtualized Rendering: Efficiently display large datasets with smooth scrolling.
• Custom Cell Rendering: Use custom functions to dynamically render cells.
• Responsive Design: Adapts to various screen sizes.
• Shadow Effects: Add customizable shadows to the table container.
• Scrollable Table Body: Enable horizontal and vertical scrolling.
• Serial Number Column: Automatically adds a serial number column.

📦 Installation

Install the table component via npm or yarn:

npm install mha-react-components
# or
yarn add mha-react-components

🚀 Usage

Here’s how you can use the Table component in your project:

import React from "react";
import Table from "mha-react-components";

const App = () => {
  const tableHeaderData = ["Name", "Age", "Country"];
  const tableBodyData = [
    ["John", "25", "USA"],
    ["Emma", "30", "UK"],
    ["Ava", "28", "Canada"],
  ];

  return (
    <Table
      shadowVisible={true}
      shadowOption={{
        color: "#ddd",
        offsetX: 2,
        offsetY: 2,
        blurRadius: 4,
        spreadRadius: 1,
      }}
      tableHeaderData={tableHeaderData}
      tableBodyData={tableBodyData}
      tableOptions={{
        stripedRows: true,
        hoverableRows: true,
        bordered: true,
        serialNumber: true,
        rowHeight: 50,
      }}
    />
  );
};

export default App;

⚙️ Props

General Props

Table Header Props

Table Body Props

🛡️ License

This library is licensed under the MIT License. Feel free to use it in your projects.

🤝 Contributing

Contributions are welcome! Please submit issues and pull requests via the GitHub repository.

🌟 Support

If you find this library useful, consider giving it a ⭐ on GitHub!