React Button

A customizable React Button component with various variants, sizes, and styling options.

Installation

npm install @kyawthihasoe/react-button
# or
yarn add @kyawthihasoe/react-button

Usage

import { Button } from '@kyawthihasoe/react-button';

function App() {
  return (
    <Button
      variant="primary"
      size="medium"
      onClick={() => console.log('Button clicked!')}
    >
      Click me
    </Button>
  );
}

Features

• Multiple variants (primary, secondary, danger, success)
• Different size options (small, medium, large)
• Full width option
• TypeScript support
• Extends native button HTML attributes
• Customizable through CSS classes

Props

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | variant | 'primary' | 'secondary' | 'danger' | 'success' | No | 'primary' | The visual style of the button | | size | 'small' | 'medium' | 'large' | No | 'medium' | Size of the button | | fullWidth | boolean | No | false | Whether the button should take full width of its container | | children | ReactNode | Yes | - | Content to be displayed in the button | | className | string | No | '' | Additional CSS classes to apply to the button |

The component also accepts all standard HTML button attributes (onClick, disabled, type, etc.).

Styling

The button comes with default styles but can be customized using CSS. The component uses the following CSS classes:

• common-button: Base button styles
• button-{variant}: Styles for each variant (e.g., button-primary, button-secondary)
• button-{size}: Styles for each size (e.g., button-small, button-medium)
• button-full-width: Applied when fullWidth prop is true

License

MIT

React Modal

A customizable React Modal component with various size options and keyboard support.

Installation

npm install @kyawthihasoe/react-modal
# or
yarn add @kyawthihasoe/react-modal

Usage

import { Modal } from '@kyawthihasoe/react-modal';

function App() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <Modal
      isOpen={isOpen}
      onClose={() => setIsOpen(false)}
      title="My Modal"
      size="medium"
    >
      <p>This is the modal content</p>
    </Modal>
  );
}

Features

• Multiple size options (small, medium, large)
• Keyboard support (ESC to close)
• Click outside to close
• Customizable title
• Body scroll lock when modal is open
• TypeScript support

Props

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | isOpen | boolean | Yes | - | Controls the visibility of the modal | | onClose | () => void | Yes | - | Callback function when modal is closed | | title | string | No | - | Optional title for the modal | | children | ReactNode | Yes | - | Content to be displayed in the modal | | size | 'small' | 'medium' | 'large' | No | 'medium' | Size of the modal |

License

MIT

React DataGrid

A customizable React DataGrid component with sorting and pagination capabilities.

Installation

npm install @kyawthihasoe/react-datagrid
# or
yarn add @kyawthihasoe/react-datagrid

Usage

import { DataGrid } from '@kyawthihasoe/react-datagrid';

const columns = [
  { field: 'id', headerName: 'ID', width: 100 },
  { field: 'name', headerName: 'Name', sortable: true },
  { field: 'age', headerName: 'Age', sortable: true },
];

const rows = [
  { id: 1, name: 'John Doe', age: 30 },
  { id: 2, name: 'Jane Smith', age: 25 },
  // ... more rows
];

function App() {
  return (
    <DataGrid
      columns={columns}
      rows={rows}
      pageSize={10}
    />
  );
}

Features

• Sortable columns
• Pagination
• Customizable column widths
• Responsive design
• TypeScript support

Props

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | columns | Column[] | Yes | - | Array of column definitions | | rows | any[] | Yes | - | Array of data objects | | pageSize | number | No | 10 | Number of rows per page |

Column Definition

interface Column {
  field: string;      // Field name in the data object
  headerName: string; // Display name for the column
  width?: number;     // Optional column width
  sortable?: boolean; // Whether the column is sortable
}

License

MIT