@megha-ui/react

@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.