React MUI is a UI library that provides fully-loaded components, bringing our own design system to our production-ready components. MUI is a user interface library that provides predefined and customizable React components for faster and easy web development, these Material-UI components are based on top of Material Design by Google.
In this article, we’ll be discussing React MUI API Design Approach. The API design approach is based on the principles of Material Design and provides a set of pre-built UI components that are easy to use and customize. The main goal of the MUI API design approach is to provide a comprehensive and consistent set of UI components that can be easily integrated into a React-based application, while also providing a high degree of flexibility and customization. This allows developers to quickly create visually appealing and functional user interfaces without having to spend a lot of time on design and styling.
API Design Approach Contents:
- Composition: It refers to the combination of several components to create a more complex and reusable UI element. It allows developers to break down a user interface into smaller, more manageable parts, making it easier to maintain and customize the overall design.
- Rules: The API design approach follow some rules like Spreading, Native properties, CSS classes, Nested Components, Prop naming, Controlled components, and Boolean vs Enum.
- Glossary: It refers to a comprehensive list of terms and definitions used in the design language. It provides a common vocabulary and helps to ensure consistent use of language and terminology across design and development teams.
Creating React Project:
Step 1: Create React app by writing the below code in any command line.
npx create-react-app app_name
Step 2: Then, we have to move into the folder we will be working on.
cd project_name
Step 3: We will be installing the @mui/material library for working on our project.
npm install @mui/material @emotion/react @emotion/styled
Project Structure:
Folder Structure
Steps to run the application: Write the below code in the terminal to run the server:
npm start
Example 1: Below is the code for API design using Spread and Prop Naming rules.
Javascript
import React from 'react'; import { Box, Button, Typography } from '@mui/material'; const styledButton = { margin: '10px'} const styledBox = { boxShadow: 2, margin: '10px', display: 'flex', justifyContent: 'center', alignItems: 'center', flexDirection: 'column'} const Example = () => { return ( <Box sx={styledBox}> <Typography sx={{ pt: 4, color: "green", fontSize: 20 }}> neveropen </Typography> <Typography>API design using spread and prop naming rules</Typography> <div> <Button variant="contained" color="primary" sx={styledButton}>Normal Button</Button> <Button variant="contained" color="primary" disabled sx={styledButton}>Disabled Button</Button> <Button variant="contained" color="primary" disableRipple sx={styledButton}> Ripple Disabled Button </Button> </div> </Box> ); } export default Example; |
Output:
API design using spread and prop naming rules
Example 2: Below is the code for API design using CSS classes and Controlled components.
Javascript
import React, { useState } from 'react'; import { Box, Button, TextField, Typography } from '@mui/material'; import { red } from '@mui/material/colors'; const ColorButton = { color: red[500], fontWeight: 600, backgroundColor: '#ffffff', margin: '10px', height: '35px', '&:hover': { backgroundColor: red[500], color: '#ffffff' }, }; const styledBox = { boxShadow: 2, margin: '10px', display: 'flex', alignItems: 'center', flexDirection: 'column'} const Example = () => { const [name, setName] = useState(); const [text, setText] = useState(true); const handleChange = (event) => { setName(event.target.value); } const handleClick = () => { setText(false); } return ( <Box sx={styledBox}> <Typography sx={{ pt: 4, color: "green", fontSize: 20 }}> neveropen </Typography> <Typography>API design using CSS classes and Controlled components</Typography> <div style={{ margin: '10px' }}> <TextField variant='outlined' label='Enter name' onChange={handleChange} /> <Button variant="contained" onClick={handleClick} sx={ColorButton}>Sign Up</Button> </div> <div hidden={text} style={{ margin: '10px', fontSize: '20px', fontWeight: 600 }}> Hello {name} </div> </Box> ); } export default Example; |
Output:
API design using CSS classes and Controlled components
Reference: https://mui.com/material-ui/guides/api/
