@megha-ui/react

A collection of reusable UI components for React applications, built with TypeScript.

Installation

Install the package using npm:

npm install @megha-ui/react

or using Yarn:

yarn add @megha-ui/react

Usage

Import and use the components in your React application:

import React from "react";
import { Button, Card, Modal, Grid } from "@megha-ui/react";

const App = () => {
  return (
    <div>
      <Button onClick={() => alert("Button Clicked")}>Click Me</Button>
      <Card>
        <p>This is a card component.</p>
      </Card>
      <Modal isOpen={true} title="Sample Modal">
        <p>Modal Content</p>
      </Modal>
      <Grid
        data={[{ name: "John" }, { name: "Jane" }]}
        columns={[{ key: "name", label: "Name" }]}
      />
    </div>
  );
};

export default App;

Components

Button

A reusable button component.

Props:

| Prop | Type | Default | Description | | ---------- | ------------ | ----------- | ------------------------------- | | onClick | () => void | undefined | Function to handle button click | | disabled | boolean | false | Disables the button | | children | ReactNode | - | Content inside the button |

Card

A simple card component.

Props:

| Prop | Type | Default | Description | | ----------- | ----------- | ------- | ----------------------- | | children | ReactNode | - | Content inside the card | | className | string | "" | Additional CSS classes |

Modal

A modal component.

Props:

| Prop | Type | Default | Description | | --------- | ------------ | ----------- | -------------------------------- | | isOpen | boolean | false | Controls visibility of the modal | | title | string | "" | Title of the modal | | onClose | () => void | undefined | Function to close the modal |

Grid

A flexible grid component.

Props:

| Prop | Type | Default | Description | | --------- | --------------------------------------- | ------- | ---------------------------------- | | data | Array<Object> | [] | Array of data to display | | columns | Array<{ key: string; label: string }> | [] | Column configuration | | rowKey | string | "id" | Field used for stable row identity |

Columns also accept a freeze property. When set to true, such columns remain visible when the grid is collapsed using the collapse icon.

Customization

All components accept className for custom styling.

Example:

<Button className="custom-button">Styled Button</Button>

.custom-button {
  background-color: #4caf50;
  color: white;
}

Development

Building the Package

To build the package, run:

npm run build

Running Tests

To run the tests, use:

npm test

Contributing

Contributions are welcome! Please open an issue or submit a pull request on GitHub.

License

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

Author

Nagendra Goud Porumalla

Acknowledgements

Special thanks to all contributors and the open-source community.