Package Exports
- mfg-ui-components
- mfg-ui-components/dist/index.esm.js
- mfg-ui-components/dist/index.js
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (mfg-ui-components) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
A modern and reusable UI components package for React applications built with TypeScript. This library offers customizable, flexible, and user-friendly UI elements for faster development.
Installation
Install the package using npm or yarn:
npm install mfg-ui-components
# or
yarn add mfg-ui-components
Demo Link
Go to documentation for batter understanding and use
Usage
Import and use the components in your React application:
Please import the stylesheet before importing any of the component.
import React from 'react';
import "mfg-ui-components/dist/styles.css";
import { Button } from 'mfg-ui-components';
const App: React.FC = () => {
const handleClick = () => alert('Button clicked!');
return <Button onClick={()=> handleClick()} ButtonClass='primary' ButtonId={"customId"} ariaSelected={true} children={"link label"} customClass={"buttonCustomClass"} />;
};
export default App;Available Components
| Component Name | Description |
|---|---|
| Accordian | A component for creating collapsible content. |
| Alert | A component for displaying alerts to users. |
| Banner | A component for displaying a banner or header at the top of a page. |
| BreadCrumb | A component for displaying breadcrumb navigation. |
| Button | A component for creating clickable buttons. |
| Card | A component for displaying content in a card-like format. |
| DatePicker | A component for selecting a date from a calendar. |
| DragDrop | A component for implementing drag and drop functionality. |
| Dragable | A component for making elements draggable. |
| Dropdown | A component for displaying a dropdown menu. |
| FlexWrap | A component for creating a flexible container with wrapping content. |
| Heading | A component for displaying headings or titles. |
| Image | A component for displaying images. |
| ImageGallerySlider | A component for displaying a gallery of images with sliding functionality. |
| ImageSlider | A component for displaying a slider for displaying images. |
| Label | A component for displaying labels or text. |
| List | A component for displaying a list of items. |
| ListItem | A component for displaying a single item in a list. |
| Loader | A component for displaying a loading indicator. |
| Modal | A component for displaying a modal window. |
| MultiselectDropdown | A component for creating a multi-select dropdown menu. |
| NavBar | A component for displaying a navigation bar. |
| Pagination | A component for displaying pagination for navigating through multiple pages. |
| ProgressBar | A component for displaying a progress bar. |
| RangeSlider | A component for displaying a range slider for selecting a range of values. |
| Search | A component for creating a search bar or input field for searching. |
| Select | A component for creating a dropdown or select input field. |
| SelectOptions | A component for displaying options in a select input field. |
| StickyNote | A component for displaying sticky notes for reminder of pending tasks |
| Switch | A component for creating a toggle switch. |
| TabMenu | A component for creating a tab menu or navigation with multiple tabs. |
| TableWithCol | A component for displaying a table with columns. |
| TableWithoutCol | A component for displaying a table without columns. |
| TextEditor | A component for creating a text editor or input field for editing text. |
| TextField | A component for creating a text input field. |
| Wrapper | A component for creating a flexible container for wrapping content. |
| ToolTip | A component for displaying tooltips or pop-up messages. |
Contact me for more details.