NextGenMUI is a plugin that integrates seamlessly with the popular React UI framework Material-UI, offering additional functionality and customization options to streamline the development process. It consists of a collection of pre-styled easy-to-use components that efficiently manage dialogs, handle user interactions, and create dynamic and responsive forms and other features, while following Material-UI's design specifications.
Incorporating NextGenMUI components contributes to an improved development experience and enhanced user interfaces in your React applications.
Run one of the following commands to add NextGenMUI to your React project:
yarn add next-gen-mui
npm install next-gen-muiAfter installation, import the components and start using them.
-
AlertDialogModel: The purpose of this component is a modal or dialog box with an alert interface that interrupts the user’s workflow to present important information and capture a response. Examples include action confirmation prompts and error message confirmations. Key features include customizable titles and content texts, straightforward action handling with Ok and Cancel buttons, and adjustable sizing for various application contexts.
Usage:
import { AlertDialogModel } from "next-gen-mui"; const App = () => { const [open, setOpen] = useState(false); return ( <AlertDialogModel open={open} onClose=//close function onAction=//action function ( ok ) dialogContentText="Are you sure you want to delete" dialogTitle="Delete" /> ); };
-
DialogModel: The purpose of this component is to create dialog modals within the user interface . Dialog is a type of modal window that temporarily interrupts the user's interaction with the main content to present important information, requests for confirmation, or input forms.Key features include flexible width settings, adjustable maximum width, and a clean, responsive design with an optional title and a close button.
Usage
import { DialogModel } from "next-gen-mui"; const App = () => { const [open, setOpen] = useState(false); return ( <DialogModel open={open} title="Dialog Model Title" onClose={"close function"} //other props > <p>This is a Dialog model and is open</p> </DialogModel> ); };
-
FormModel: The purpose of this component is to render a form within a modal dialog window based on the provided input configuration. It supports various input types, including password fields with visibility toggle, and provides real-time validation feedback.Key features includes adjustable grid columns, input widths, and a dynamic schema ensure flexibility for diverse form layouts.
Usage
import { FormModel } from "next-gen-mui"; const App = () => { const inputs = [ { name: "username", label: "Username", type: "text", value: "", }, { name: "password", label: "Password", type: "password", value: "", }, { name: "isAdmin", label: "Is Admin", lookups: [ { title: "Yes", value: 0 }, { title: "No", value: 1 }, ], value: "", }, { name: "roles", label: "Roles", lookups: [ { title: "Edit", value: 3 }, { title: "Delete", value: 6 }, { title: "Add", value: 12 }, ], multiple: true, value: [ { title: "Edit", value: 3 }, { title: "Delete", value: 6 }, ], }, ]; return ( <FormModel inputs={inputs || []} width={400} onSubmit={(values) => console.log(values)} //other props /> ); };
-
StepperFormModel: The purpose of this component is to provide the functionality of a stepper (or multi-step) form with that of a modal dialog. It allows users to complete a form in a step-by-step manner within a modal window, making it perfect for scenarios like registrations or multi-stage data entries, offering customizable step labels, input fields, and navigation buttons.
Usage
import { StepperFormModel } from "next-gen-mui"; const App = () => { const steps = [ { label: "Step 1", inputs: [ { name: "username", label: "Username", type: "text", value: "", }, { name: "password", label: "Password", type: "password", value: "", }, ], }, { label: "Step 2", inputs: [ { name: "isAdmin", label: "Is Admin", lookups: [ { title: "Yes", value: 0 }, { title: "No", value: 1 }, ], value: "", }, { name: "roles", label: "Roles", lookups: [ { title: "Edit", value: 3 }, { title: "Delete", value: 6 }, { title: "Add", value: 12 }, ], multiple: true, value: [{ title: "Edit", value: 3 }], //will be passed as the default values for this input, }, ], }, ]; return ( <StepperFormModel steps={steps || []} width={400} onSubmit={(values) => console.log(values)} //other props /> ); };
-
GridModel: The purpose of this component is to set up a grid component to display tabular data with custom column configuration, data rows, and styling. The component seamlessly integrated with material UI is designed for flexibility and ease of use. It supports features like dynamic data rendering, printing, and exporting functionalities.It also includes interactive elements such as a calendar for date filtering, custom button actions, and an option to add new data entries, making it suitable for a wide range of data management tasks.
Usage
import { GridModel } from "next-gen-mui"; const App = () => { const columns = [ { field: "name", flex: 1 }, { field: "age", flex: 1 }, { field: "gender", flex: 1 }, { field: "class", flex: 1 }, { field: "color", flex: 1 }, ]; const rows = [ { name: "Amos", age: 21, gender: "male", class: "C", color: "black" }, ]; <GridModel columns={columns} rows={rows} getRowId={(rows) => rows.name} pageSizeOptions={[5, 10, 20, 50, 100]} onDateChange={({ startDate, endDate }) => console.log(startDate, endDate) } sx={{ "&>.MuiDataGrid-main": { "& .MuiDataGrid-columnHeaderTitle": { fontSize: 15, fontWeight: 900, }, "& .MuiDataGrid-columnHeader:focus": { outline: "none", }, "& .MuiDataGrid-columnHeader:focus-within": { outline: "none !important", }, }, "&.MuiDataGrid-root .MuiDataGrid-cell:focus-within": { outline: "none !important", }, "& .odd-row": { backgroundColor: "rgba(245,250,254, 0.9)", }, borderColor: "rgba(0, 0, 0, 0.2)", }} />; };
-
SideBarModel: The SideBarModel component provides a robust, aesthetically pleasing navigation system with adaptable features and a user-friendly interface. It's suitable for applications requiring a comprehensive sidebar navigation solution within a Material-UI environment.
This component is composed of DrawerItemsModel and ListItemsModel, which collectively handle the rendering of navigation items, including support for nested sub-links and sections. The sidebar's functionality is augmented with React Router for seamless navigation and route management. Users can expand or collapse the sidebar, offering a space-efficient way to access various parts of an application.
Usage
SideBarModel can have sections or just a plain sidebar navigation.
import { SideBarModel } from "next-gen-mui"; const App = () => { const NavHeader = () => { return ( {** nav header component here**} ) } //for splain sidebar const navigation = [ { name: "Dashboard", icon: DashboardIcon, path: "/", renderList: (params) => { // console.log(params) // return ( // <p>{params.name}</p> // ) }, }, { name: "Clients", icon: GroupIcon, path: "/dashboard/clients", }, { name: "Worklogs", icon: DataThresholdingIcon, path: "/worklogs", subLinks: [ { name: "User Data", icon: AccountBalanceIcon, path: "/worklogs/user data", renderList: (params) => { // console.log(params) // return ( // <p>{params.name}</p> // ) }, }, { name: "Client Statistics", icon: ManageHistoryIcon, }, ], }, ]; //for sidebar with sections const nav = { sections: [ { title: "Overview", list: [...navigation], }, { title: "Accounts", list: [ { name: "Chat", icon: ChatBubbleIcon }, { name: "Settings", icon: SettingsIcon }, { name: "Logout", icon: LogoutIcon } ] } ] } return ( <SideBarModel navigateItems=//if it has section, nav, else navigation NavHeader={NavHeader} openHeader={open} activeTabBackgroundColor="#395759" backgroundColor="#001d25" textColor="#c8cecf" options={{ listItemButton: { border: "1px solid red", padding: .7 } listItemButton: (list) => ( { border: "1px solid red", paddingY: list.isActiveTab ? 1 : 0 } ), listItemText: { color: "red" }, getColor: (params) => { return params.isActiveTab ? "red" : "white" } }} /> ) };
-
PopoverModel: This component is designed to display a popover menu with customizable options. It allows for dynamic menu item rendering, each with optional icons and individual click handlers. This model elegantly integrates with Material-UI's Menu component, offering a visually appealing and user-friendly interface. It's ideal for adding context-sensitive menus to enhance user interaction in modern web applications.
Usage
import { PopoverModel } from "next-gen-mui"; const App = () => { const [anchorEL, setAnchorEl] = useState(null); const open = Boolean(anchorEL); const options = [ { name: "Add", icon: //icon ( optional ), onItemClick: (e) => { console.log(e); }, }, { name: "Delete", icon: //icon ( optional ), onItemClick: (e) => { console.log(e); }, }, { name: "Share", icon: //icon ( optional ), onItemClick: (e) => { console.log(e); }, } ]; return ( <div> <button onClick={(e) => setAnchorEL(e.currentTarget)}>open menu</button> <PopoverModel popoverItems={options} open={open} /> </div> ) };
NextGenMUI is continuously evolving, with more components in development to further enrich its offering. The focus remains on providing high-quality, customizable, and easy-to-integrate solutions that cater to the ever-changing needs of modern web development.
NextGenMUI is perfect for developers who are looking to leverage the power of Material-UI while also desiring additional features and customization options. Whether you are building a small project or a large-scale enterprise application, NextGenMUI offers components that are scalable, efficient, and aesthetically pleasing
Designed with ease of use in mind, NextGenMUI integrates seamlessly into your existing Material-UI projects. The components are designed to be drop-in replacements or enhancements to standard MUI components, ensuring a smooth transition and minimal learning curve.
As NextGenMUI continues to grow, we are committed to introducing more components and features. Stay tuned for updates and enhancements that will further empower your web development journey with Material-UI.
We welcome contributions to our component library! Whether you're fixing a bug, adding a feature, or improving documentation, here's how you can contribute:
Begin by forking the repository to your own GitHub account. This creates a copy where you can make your changes.
Clone the forked repository to your local machine. This step allows you to work on the codebase locally.
cd YOUR-REPOSITORY
yarn installgit checkout -b your-branch-name- Create your new component within the lib folder. This folder contains all the components of the library.
- Test your component by importing and using it in
app.js. This file is our testing ground for components.
After you've added your component, run the following command to add the new component to the Dist folder:
yarn buildCommit your changes with a clear commit message. Push the changes to your forked repository.
git commit -m "Add a brief description of your changes"
git push origin your-branch-nameGo to your forked repository on GitHub and open a pull request to the original repository. Provide a detailed description your changes and reference any related issues. Give a reason too of why they should be merged.
Please ensure your code adheres to our coding standards and include any necessary tests. We look forward to your contributions! 🌟