@megha-ui/react NPM

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

text input

file-saver react-icons styled-components uuid xlsx

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago