@thestartupfactory/open-mui-extensions

open-mui-extensions

A collection of reusable utilities and components designed to extend Material-UI (MUI) in React projects using TypeScript. This library offers styled components, utility functions, and custom React components that simplify common patterns like responsive design, virtualized tables, and confirmation dialogs.

Installation

npm install @thestartupfactory/open-mui-extensions

Features

Styling Utilities

This package includes styled MUI components to enhance the design and usability of your React applications, for example:

import { SmallText } from 'your-package-name';

<SmallText>Sample small text content</SmallText>;

Reusable components

This library also exports fully functional React components designed to handle complex UI interactions, like:

• InfiniteTable: A virtualized table with infinite scrolling, sortable columns, and integration with React Query for data fetching. Ideal for rendering large datasets efficiently.

import { InfiniteTable } from 'your-package-name';

const fetchData = async (page: number, pageSize: number, sorting: any) => {
  // Fetch data logic
};

const columns = [
  /* your column definitions */
];

<InfiniteTable
  columnDefs={columns}
  fetchData={fetchData}
  queryKey="my-table-data"
/>;

• ConfirmDialog: A customizable confirmation dialog with action buttons. Useful for asking users to confirm important actions like deletions.

import { ConfirmDialog } from 'your-package-name';

<ConfirmDialog
  open={open}
  text="Are you sure you want to proceed?"
  onConfirm={handleConfirm}
  onClose={handleClose}
  title="Confirmation"
/>;

Example

import React, { useState } from 'react';
import { ConfirmDialog } from 'your-package-name';

const MyComponent = () => {
  const [open, setOpen] = useState(false);

  const handleConfirm = () => {
    console.log('Confirmed!');
    setOpen(false);
  };

  return (
    <>
      <button onClick={() => setOpen(true)}>Delete</button>
      <ConfirmDialog
        open={open}
        text="Are you sure you want to delete this item?"
        onConfirm={handleConfirm}
        onClose={() => setOpen(false)}
        actionText="Delete"
        cancelText="Cancel"
      />
    </>
  );
};

export default MyComponent;

Additional Utilities

This package includes more components, for a full list of available utilities, refer to the source code.