Fuse React Next.js

https://fuse-react-nextjs-demo.fusetheme.com/documentation
Admin
Fuse React Next.js is a comprehensive React template built with Next.js, Material-UI, and...
Tokens:132,789
Snippets:1,177
Trust Score:8.4
Update:10 months ago
Show doc for...
Tokens:
Raw
### Start Development Server (npm)

Source: https://fuse-react-nextjs-demo.fusetheme.com/documentation/development/development-server

This command initiates the FUSE React development server using npm. Ensure Node.js LTS is installed and dependencies are correctly set up. The server typically runs on http://localhost:3000.

```bash
npm run dev
```

--------------------------------

### Basic Popover Example - Fuse React

Source: https://fuse-react-nextjs-demo.fusetheme.com/documentation/material-ui-components/popover

Demonstrates the fundamental usage of the Popover component. It shows how to trigger and display a simple popover with minimal configuration. This example serves as a starting point for integrating the Popover into your application.

```jsx
import React from 'react';
import Popover from '@mui/material/Popover';

function BasicPopover() {
  const [anchorEl, setAnchorEl] = React.useState(null);

  const handleClick = (event) => {
    setAnchorEl(event.currentTarget);
  };

  const handleClose = () => {
    setAnchorEl(null);
  };

  const open = Boolean(anchorEl);
  const id = open ? 'simple-popover' : undefined;

  return (
    <div>
      <button aria-describedby={id} variant="contained" onClick={handleClick}>
        Open Popover
      </button>
      <Popover
        id={id}
        open={open}
        anchorEl={anchorEl}
        onClose={handleClose}
        anchorOrigin={{
          vertical: 'bottom',
          horizontal: 'left',
        }}
      >
        <Typography sx={{ p: 2 }}>The content of the Popover.</Typography>
      </Popover>
    </div>
  );
}
```

--------------------------------

### Image Masonry Layout Example (React)

Source: https://fuse-react-nextjs-demo.fusetheme.com/documentation/material-ui-components/masonry

Illustrates how to use the Masonry component specifically for displaying images. This example shows ordering images by row, and for column-based ordering, it suggests checking out the ImageList component.

```jsx
import { Masonry } from '@mui/lab';

const imageStyle = {
  display: 'block',
  width: '100%',
};

function ImageMasonry() {
  return (
    <Masonry columns={3} spacing={1}>
      {Array.from(Array(16)).map(
        (_, index) => (
          <img
            key={index}
            src={`https://source.unsplash.com/random?wallpapers&${index}`}
            alt="random"
            style={imageStyle}
            loading="lazy"
          />
        ),
      )}
    </Masonry>
  );
}
```

--------------------------------

### Full Feature Directory Structure Example (TypeScript)

Source: https://fuse-react-nextjs-demo.fusetheme.com/documentation/development/directory-structure

Illustrates a comprehensive directory structure for a feature, encompassing API, components, contexts, hooks, and Next.js routing. This example demonstrates how to integrate all organized parts of a feature.

```typescript
contacts/
├── api/
│   ├── hooks/
│   │   ├── useContacts.ts
│   │   ├── useCreateContact.ts
│   │   └── useUpdateContact.ts
│   ├── services/
│   │   └── contactsApi.ts
│   ├── types/
│   │   └── index.ts
│   └── models/
│       └── ContactModel.ts
├── components/
│   ├── views/
│   │   └── ContactsView.tsx
│   ├── ui/
│   │   ├── ContactCard.tsx
│   │   └── ContactList.tsx
│   └── forms/
│       └── ContactForm.tsx
├── contexts/
│   └── ContactsContext/
│       ├── Context.ts
│       ├── Provider.tsx
│       └── useContactsContext.ts
├── hooks/
│   ├── useContactFilter.ts
│   └── useContactSearch.ts
└── (routes)/
    ├── page.tsx
    └── [contactId]/
        └── page.tsx
```

--------------------------------

### Mock API Route Implementation Example (TypeScript)

Source: https://fuse-react-nextjs-demo.fusetheme.com/documentation/development/api-integration

Provides an example of implementing API routes using the custom `mockApi` utility in Fuse React. It shows how to handle GET and POST requests for fetching and creating user data, simulating database operations.

```typescript
import mockApi from 'src/@mock-utils/mockApi';

export async function GET(req: Request) {
	const url = new URL(req.url);
	const queryParams = Object.fromEntries(url.searchParams.entries());
	const api = mockApi('users');
	const items = await api.findAll(queryParams);

	return new Response(JSON.stringify(items), { status: 200 });
}

export async function POST(req: Request) {
	const api = mockApi('users');
	const requestData = await req.json();
	const newItem = await api.create(requestData);

	return new Response(JSON.stringify(newItem), { status: 201 });
}
```

--------------------------------

### Avatar Upload Component Example

Source: https://fuse-react-nextjs-demo.fusetheme.com/documentation/material-ui-components/avatars

Provides a conceptual example of an avatar upload component, likely integrating file input and preview functionalities. This serves as a starting point for implementing user avatar management.

```jsx
// Placeholder for Avatar Upload component implementation
// This would typically involve input elements, state management for the image file,
// and potentially an API call to upload the avatar.
const AvatarUpload = () => {
  return (
    <div>
      {/* Add Avatar upload UI elements here */}
      <input type="file" accept="image/*" />
      {/* Display selected avatar preview */}
    </div>
  );
};

export default AvatarUpload;
```

--------------------------------

### Customized useAutocomplete Hook Example in React

Source: https://fuse-react-nextjs-demo.fusetheme.com/documentation/material-ui-components/autocomplete

Provides an example of using the 'useAutocomplete()' hook for a custom Autocomplete implementation. This demonstrates how to leverage the hook's logic to build a fully customized UI for Autocomplete functionality.

```javascript
import React from 'react';
import { useAutocomplete } from '@mui/material/useAutocomplete';
import TextField from '@mui/material/TextField';
import Popper from '@mui/material/Popper';
import Box from '@mui/material/Box';
import ListboxComponent from './ListboxComponent'; // Assuming a custom ListboxComponent

function CustomizedHookAutocomplete() {
  const options = ['The Godfather', 'The Dark Knight', '12 Angry Men'];

  const { 
    getRootProps,
    getInputProps,
    getPopperProps,
    getListItemProps,
    // ... other hook properties
  } = useAutocomplete({
    id: 'customized-hook-demo',
    options: options,
    getOptionLabel: (option) => option,
  });

  return (
    <Box {...getRootProps()}>
      <TextField {...getInputProps()} label="Customized hook" />
      <Popper {...getPopperProps()}>
        <ListboxComponent {...getPopperProps()}>
          {options.map((option, index) => (
            <li {...getListItemProps(option, index)}>
              {option}
            </li>
          ))}
        </ListboxComponent>
      </Popper>
    </Box>
  );
}
```

--------------------------------

### Prominent App Bar Example - MUI

Source: https://fuse-react-nextjs-demo.fusetheme.com/documentation/material-ui-components/app-bar

A simple example of a prominent app bar using Material-UI (MUI) components. This serves as a basic visual element for navigation or branding.

```javascript
function App() {
  return (
    <React.Fragment>
      <AppBar position="fixed">
        <Toolbar>{/* content */}</Toolbar>
      </AppBar>
      <Toolbar />
    </React.Fragment>
  );
}
```

--------------------------------

### Basic Modal Example in JavaScript

Source: https://fuse-react-nextjs-demo.fusetheme.com/documentation/material-ui-components/modal

Demonstrates the basic usage of the Modal component. It shows how to open and close a simple modal dialog. The example highlights the use of the 'outline: 0' CSS property to disable the modal's outline.

```jsx
import * as React from 'react';
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
import Typography from '@mui/material/Typography';
import Modal from '@mui/material/Modal';

const style = {
  position: 'absolute',
  top: '50%',
  left: '50%',
  transform: 'translate(-50%, -50%)',
  width: 400,
  bgcolor: 'background.paper',
  border: '2px solid #000',
  boxShadow: 24,
  p: 4,
};

export default function BasicModal() {
  const [open, setOpen] = React.useState(false);
  const handleOpen = () => setOpen(true);
  const handleClose = () => setOpen(false);

  return (
    <div>
      <Button onClick={handleOpen}>Open modal</Button>
      <Modal
        open={open}
        onClose={handleClose}
        aria-labelledby="modal-modal-title"
        aria-describedby="modal-modal-description"
      >
        <Box sx={style}>
          <Typography id="modal-modal-title" variant="h6" component="h2">
            Text in Modal
          </Typography>
          <Typography id="modal-modal-description" sx={{ mt: 2 }}>
            Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
          </Typography>
        </Box>
      </Modal>
    </div>
  );
}
```

--------------------------------

### Basic Popper Example (React)

Source: https://fuse-react-nextjs-demo.fusetheme.com/documentation/material-ui-components/popper

Demonstrates a basic implementation of the Popper component. It shows how to toggle the visibility of a Popper element, which is used to display content on top of other elements. This example utilizes React and likely a UI library like Material UI.

```jsx
function BasicPopper() {
  const [open, setOpen] = React.useState(false);

  const handleClick = () => {
    setOpen((prevOpen) => !prevOpen);
  };

  const handleClose = () => {
    setOpen(false);
  };

  return (
    <div>
      <Button onClick={handleClick}>Toggle Popper</Button>
      <Popper open={open} placement="bottom-start" disablePortal>
        {({ TransitionProps }) => (
          <Fade {...TransitionProps} timeout={350}>
            <Paper>
              <Typography sx={{ p: 2 }}>The content of the Popper.</Typography>
            </Paper>
          </Fade>
        )}
      </Popper>
    </div>
  );
}
```

--------------------------------

### Floating Action Button (FAB) Animation Example

Source: https://fuse-react-nextjs-demo.fusetheme.com/documentation/material-ui-components/floating-action-button

Demonstrates how to implement animations for a Floating Action Button (FAB) using transitions. This example uses a 'Zoom' transition and `enterDelay` to manage the animation sequence when multiple FABs might appear. It shows a FAB that animates onto the screen.

```javascript
import * as React from 'react';
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
import Zoom from '@mui/material/Zoom';

const fabTransitionDuration = {
  enter: 550,
  exit: 0,
};

const fab = (
  <Box sx={{ position: 'absolute', bottom: 16, right: 16 }}>
    <Zoom
      in
      timeout={fabTransitionDuration}
      unmountOnExit
    >
      <Button variant="contained">Item One</Button>
    </Zoom>
  </Box>
);

function FABAnimation() {
  return (
    <Box sx={{ height: 200, position: 'relative' }}>
      {fab}
    </Box>
  );
}
```

--------------------------------

### Basic Select Example - JavaScript/TypeScript

Source: https://fuse-react-nextjs-demo.fusetheme.com/documentation/material-ui-components/selects

Demonstrates a simple Select component where the menu is positioned below the input. This is the default behavior unless the element is near the bottom of the viewport. It requires basic React and Material-UI setup.

```javascript
import * as React from 'react';
import InputLabel from '@mui/material/InputLabel';
import MenuItem from '@mui/material/MenuItem';
import FormControl from '@mui/material/FormControl';
import Select from '@mui/material/Select';

export default function BasicSelect() {
  const [age, setAge] = React.useState('');

  const handleChange = (event) => {
    setAge(event.target.value);
  };

  return (
    <div>
      <FormControl fullWidth>
        <InputLabel id="demo-simple-select-label">Age</InputLabel>
        <Select
          labelId="demo-simple-select-label"
          id="demo-simple-select"
          value={age}
          label="Age"
          onChange={handleChange}
        >
          <MenuItem value={10}>Ten</MenuItem>
          <MenuItem value={20}>Twenty</MenuItem>
          <MenuItem value={30}>Thirty</MenuItem>
        </Select>
      </FormControl>
    </div>
  );
}
```

--------------------------------

### Basic Pagination Example

Source: https://fuse-react-nextjs-demo.fusetheme.com/documentation/material-ui-components/pagination

Demonstrates the fundamental usage of the Pagination component to allow users to navigate through a range of pages. This is the simplest form of the component.

```javascript
import Pagination from '@mui/material/Pagination';

function PaginationBasic() {
  return <Pagination count={10} />;
}
```

--------------------------------

### Positioned Popper Example (React)

Source: https://fuse-react-nextjs-demo.fusetheme.com/documentation/material-ui-components/popper

Demonstrates how to position a Popper component relative to its anchor element. This example showcases various placement options like 'top', 'bottom', 'left', 'right', and their combinations ('top-start', 'bottom-end', etc.). It's useful for creating tooltips, dropdowns, and other contextual overlays.

```jsx
function PositionedPopper() {
  const [open, setOpen] = React.useState(false);
  const anchorRef = React.useRef(null);

  const handleToggle = () => {
    setOpen((prevOpen) => !prevOpen);
  };

  return (
    <>
      <Button ref={anchorRef} onClick={handleToggle}>Toggle Popper</Button>
      <Popper open={open} anchorEl={anchorRef.current} placement="top-start">
        <Paper>
          <Typography sx={{ p: 2 }}>top-start</Typography>
        </Paper>
      </Popper>
      <Popper open={open} anchorEl={anchorRef.current} placement="top">
        <Paper>
          <Typography sx={{ p: 2 }}>top</Typography>
        </Paper>
      </Popper>
      <Popper open={open} anchorEl={anchorRef.current} placement="top-end">
        <Paper>
          <Typography sx={{ p: 2 }}>top-end</Typography>
        </Paper>
      </Popper>
      {/* Add other placements similarly */}
    </>
  );
}
```

--------------------------------

### Install Roboto Font with pnpm

Source: https://fuse-react-nextjs-demo.fusetheme.com/documentation/material-ui-components/typography

Installs the Roboto font package using pnpm. This is an alternative package manager for installing the Roboto font.

```bash
pnpm add @fontsource/roboto
```

--------------------------------

### Basic Floating Action Button (FAB) Example

Source: https://fuse-react-nextjs-demo.fusetheme.com/documentation/material-ui-components/floating-action-button

Demonstrates the basic implementation of a Floating Action Button (FAB). FABs are used for the primary action on a screen and appear in front of other content. This example shows a simple FAB with a 'Navigate' label.

```javascript
import Button from '@mui/material/Button';

function BasicFAB() {
  return (
    <Button variant="contained" sx={{ m: 1 }}>
      Navigate
    </Button>
  );
}
```

--------------------------------

### Rating Customization Example (Icons & Colors)

Source: https://fuse-react-nextjs-demo.fusetheme.com/documentation/material-ui-components/rating

Shows examples of customizing the rating component's appearance, including changing the icon and color. This uses custom SVG icons and demonstrates how to apply custom color schemes.

```javascript
import Rating from '@mui/material/Rating';
import Typography from '@mui/material/Typography';
import Box from '@mui/material/Box';
import FavoriteIcon from '@mui/icons-material/Favorite';
import FavoriteBorderIcon from '@mui/icons-material/FavoriteBorder';

function CustomizedRating() {
  return (
    <Box
      sx={{
        '& > legend': {
          mt: 2,
        },
      }}
    >
      <Typography component="legend">Custom icon and color</Typography>
      <Rating
        name="customized-color"
        defaultValue={3}
        getLabelText={(value) => `${value} Heart${value !== 1 ? 's' : ''}`}
        precision={0.5}
        icon={<FavoriteIcon fontSize="inherit" />}
        emptyIcon={<FavoriteBorderIcon fontSize="inherit" />}
        sx={{ color: 'red', '& .MuiRating-iconFilled': { color: '#ff6d75' }, '& .MuiRating-iconHover': { color: '#ff3d47' } }}
      />
      <Typography component="legend">10 stars</Typography>
      <Rating
        name="customized-10"
        defaultValue={2}
        max={10}
        sx={{ color: 'gold', '& .MuiRating-iconFilled': { WebkitTextFillColor: 'orange' } }}
      />
    </Box>
  );
}
```

--------------------------------

### Install Roboto Font with yarn

Source: https://fuse-react-nextjs-demo.fusetheme.com/documentation/material-ui-components/typography

Installs the Roboto font package using yarn. This is another alternative package manager for installing the Roboto font.

```bash
yarn add @fontsource/roboto
```

--------------------------------

### Create Filter Options with Custom Configuration

Source: https://fuse-react-nextjs-demo.fusetheme.com/documentation/material-ui-components/autocomplete

Demonstrates how to create a custom filter function for the Autocomplete component using `createFilterOptions`. This example configures the filter to match options that start with the input value and specifies how to extract the display string from an option.

```javascript
const filterOptions = createFilterOptions({
  matchFrom: 'start',
  stringify: (option) => option.title,
});

<Autocomplete filterOptions={filterOptions} />;
```

--------------------------------

### Material UI Zoom Transition Example

Source: https://fuse-react-nextjs-demo.fusetheme.com/documentation/material-ui-components/transitions

Provides an example of the Zoom transition component from Material UI. This component expands outwards from the center. The example demonstrates delaying the enter transition.

```jsx
import * as React from 'react';
import Fade from '@mui/material/Fade';
import Button from '@mui/material/Button';
import Box from '@mui/material/Box';

const MyComponent = React.forwardRef(function (props, ref) {
  return (
    <Box ref={ref} {...props}>
      Zoom
    </Box>
  );
});

export default function ZoomTransition() {
  const [checked, setChecked] = React.useState(false);

  const handleChange = () => {
    setChecked((prev) => !prev);
  };

  return (
    <Box sx={{ height: 100 }}>
      <Button onClick={handleChange}>Toggle Zoom</Button>
      <Box sx={{ display: 'flex', justifyContent: 'center' }}>
        <Fade in={checked} style={{ transitionDelay: checked ? '500ms' : '0ms' }}>
          <MyComponent />
        </Fade>
      </Box>
    </Box>
  );
}
```

--------------------------------

### Popper with Transitions Example (React)

Source: https://fuse-react-nextjs-demo.fusetheme.com/documentation/material-ui-components/popper

Illustrates how to integrate animations for the open and close states of a Popper component using transition components. This example leverages `react-transition-group` for smooth visual effects when the Popper appears or disappears. It requires the transition component to be a direct child and manage `onEnter` and `onExited` callbacks.

```jsx
function TransitionsPopper() {
  const [open, setOpen] = React.useState(false);

  const anchorRef = React.useRef(null);

  const handleToggle = () => {
    setOpen((prevOpen) => !prevOpen);
  };

  return (
    <div>
      <Button ref={anchorRef} onClick={handleToggle}>Toggle Popper</Button>
      <Popper open={open} anchorEl={anchorRef.current} role={undefined} transition>
        {({ TransitionProps }) => (
          <Fade {...TransitionProps} timeout={350}>
            <Paper>
              <Typography sx={{ p: 2 }}>The content of the Popper.</Typography>
            </Paper>
          </Fade>
        )}
      </Popper>
    </div>
  );
}
```

--------------------------------

### Accessibility Example (Good)

Source: https://fuse-react-nextjs-demo.fusetheme.com/documentation/material-ui-components/rating

Provides an example demonstrating good accessibility practices for the rating component, ensuring it's usable with assistive technologies. This includes proper labeling and keyboard navigation.

```javascript
import Rating from '@mui/material/Rating';
import Typography from '@mui/material/Typography';
import Box from '@mui/material/Box';

function AccessibleRating() {
  return (
    <Box
      sx={{
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        '& > legend': {
          mt: 2,
        },
      }}
    >
      <Typography component="legend">Good</Typography>
      <Rating
        name="customized-radios"
        defaultValue={3}
        getLabelText={(value) => `${value} Star${value !== 1 ? 's' : ''}`}
        inputProps={{ 'aria-label': '4 stars' }}
        // Example for getLabelText in different languages:
        // getLabelText={(value) => i18n.t('{{plural("star", value)}}', { value })}
      />
    </Box>
  );
}
```

--------------------------------

### Install Roboto Font with npm

Source: https://fuse-react-nextjs-demo.fusetheme.com/documentation/material-ui-components/typography

Installs the Roboto font package using npm. This is a prerequisite for using the Roboto font with Material UI.

```bash
npm install @fontsource/roboto
```

--------------------------------

### Popper with Virtual Element Example (React)

Source: https://fuse-react-nextjs-demo.fusetheme.com/documentation/material-ui-components/popper

Explains how to use a 'virtual element' as the anchor for a Popper component. This is useful when the anchor isn't a standard DOM element but rather a conceptual reference point, such as a highlighted portion of text. The example requires creating a `VirtualElement` object that mimics DOM element properties.

```jsx
function VirtualElementPopper() {
  const [open, setOpen] = React.useState(false);
  const [anchorEl, setAnchorEl] = React.useState(null);

  const handleMouseOver = (event) => {
    setAnchorEl(event.currentTarget.getBoundingClientRect());
    setOpen(true);
  };

  const handleMouseOut = () => {
    setOpen(false);
  };

  // Example of creating a virtual element
  const virtualElement = {
    getBoundingClientRect: () => (
      anchorEl
    ),
  };

  return (
    <div>
      <Typography
        onMouseOver={handleMouseOver}
        onMouseOut={handleMouseOut}
        sx={{ cursor: 'pointer' }}
      >
        Highlight part of the text to see the popper:
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ipsum purus, bibendum sit amet vulputate eget, porta semper ligula. Donec bibendum vulputate erat, ac fringilla mi finibus nec. Donec ac dolor sed dolor porttitor blandit vel vel purus. Fusce vel malesuada ligula. Nam quis vehicula ante, eu finibus est. Proin ullamcorper fermentum orci, quis finibus massa. Nunc lobortis, massa ut rutrum ultrices, metus metus finibus ex, sit amet facilisis neque enim sed neque. Quisque accumsan metus vel maximus consequat. Suspendisse lacinia tellus a libero volutpat maximus.
      </Typography>
      <Popper open={open} anchorEl={virtualElement} placement="bottom-start">
        <Paper>
          <Typography sx={{ p: 2 }}>Virtual element popper content.</Typography>
        </Paper>
      </Popper>
    </div>
  );
}
```

--------------------------------

### Customized Menu Example (JavaScript/TypeScript)

Source: https://fuse-react-nextjs-demo.fusetheme.com/documentation/material-ui-components/menus

Provides an example of how to customize the appearance of the Menu component. This involves using Material-UI's styling and theming capabilities. Specific overrides for Menu and MenuItem can be applied to achieve custom designs. Refer to the Material-UI overrides documentation for detailed customization.

```javascript
import * as React from 'react';
import { styled, alpha } from '@mui/material/styles';
import Button from '@mui/material/Button';
import Menu from '@mui/material/Menu';
import MenuItem from '@mui/material/MenuItem';
import EditIcon from '@mui/icons-material/Edit';
import FileCopyIcon from '@mui/icons-material/FileCopy';
import ArchiveIcon from '@mui/icons-material/Archive';
import MoreHorizIcon from '@mui/icons-material/MoreHoriz';

const StyledMenu = styled((props) => (
  <Menu
    elevation={0}
    anchorOrigin={{
      vertical: 'bottom',
      horizontal: 'right',
    }}
    transformOrigin={{
      vertical: 'top',
      horizontal: 'right',
    }}
    {...props}
  />
))(({ theme }) => ({
  '& .MuiPaper-root': {
    borderRadius: 6,
    marginTop: theme.spacing(1),
    minWidth: 180,
    color:
      theme.palette.mode === 'light'
        ? 'rgb(55, 65, 81)'
        : theme.palette.neutral[300],
    boxShadow:
      '0px 3px 5px -1px rgba(0,0,0,0.2),',
      '0px 6px 10px 0px rgba(0,0,0,0.14),',
      '0px 1px 18px 0px rgba(0,0,0,0.12)',
    '& .MuiMenuItem-root': {
      '& .MuiSvgIcon-root': {
        fontSize: 18,
        color: theme.palette.text.secondary,
        marginRight: theme.spacing(1.5),
      },
      '&:active': {
        backgroundColor',
          alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity),
      },
    },
  },
}));

export default function CustomizedMenus() {
  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
  const open = Boolean(anchorEl);
  const handleClick = (event: React.MouseEvent<HTMLElement>) => {
    setAnchorEl(event.currentTarget);
  };
  const handleClose = () => {
    setAnchorEl(null);
  };

  return (
    <div>
      <Button
        id="demo-customized-button"
        aria-controls={open ? 'demo-customized-menu' : undefined}
        aria-haspopup="true"
        aria-expanded={open ? 'true' : undefined}
        variant="contained"
        disableElevation
        onClick={handleClick}
      >
        Options
      </Button>
      <StyledMenu
        id="demo-customized-menu"
        MenuListProps={{ 'aria-labelledby': 'demo-customized-button' }}
        anchorEl={anchorEl}
        open={open}
        onClose={handleClose}
      >
        <MenuItem onClick={handleClose} disableRipple>
          <EditIcon />
          Edit
        </MenuItem>
        <MenuItem onClick={handleClose} disableRipple>
          <FileCopyIcon />
          Duplicate
        </MenuItem>
        <MenuItem onClick={handleClose} disableRipple>
          <ArchiveIcon />
          Archive
        </MenuItem>
        <MenuItem onClick={handleClose} disableRipple>
          <MoreHorizIcon />
          More options
        </MenuItem>
      </StyledMenu>
    </div>
  );
}
```

--------------------------------

### Controlled Pagination Example

Source: https://fuse-react-nextjs-demo.fusetheme.com/documentation/material-ui-components/pagination

Demonstrates a controlled Pagination component where the current page state is managed externally, allowing for synchronization with other components or URL parameters.

```javascript
import * as React from 'react';
import Pagination from '@mui/material/Pagination';
import Stack from '@mui/material/Stack';

function ControlledPagination() {
  const [page, setPage] = React.useState(1);
  const handleChange = (event, newPage) => {
    setPage(newPage);
  };

  return (
    <Stack spacing={2}>
      <Pagination count={10} page={page} onChange={handleChange} />
    </Stack>
  );
}
```

--------------------------------

### Basic Tooltip Example - React

Source: https://fuse-react-nextjs-demo.fusetheme.com/documentation/material-ui-components/tooltips

Demonstrates the fundamental usage of the Tooltip component. It wraps a simple text element and displays a title on hover.

```jsx
import Tooltip from '@mui/material/Tooltip';

function BasicTooltip() {
  return (
    <Tooltip title="Add To Cart">
      <button>Add To Cart</button>
    </Tooltip>
  );
}
```

--------------------------------

### Skeleton Color Customization Example (CSS/React)

Source: https://fuse-react-nextjs-demo.fusetheme.com/documentation/material-ui-components/skeleton

Explains how to customize the color of the Skeleton component using CSS, specifically the `background-color` property. This is particularly useful for ensuring visibility on dark backgrounds where the default skeleton color might blend in. The example implies that standard CSS can be applied to the Skeleton component or its container. Dependencies include the Skeleton component and CSS.

```css
.custom-skeleton {
  background-color: #333 !important; /* Example for dark background */
}
```

```jsx
<Skeleton variant="rectangular" width={300} height={100} className="custom-skeleton" />
```

--------------------------------

### Skeleton Typography Example (React)

Source: https://fuse-react-nextjs-demo.fusetheme.com/documentation/material-ui-components/skeleton

Illustrates how the Skeleton component can be used with typography elements to show a placeholder for text content. The example shows a 'h1' heading, where a Skeleton is displayed if 'loading' is true, otherwise the actual 'h1' text is shown. This leverages the component's ability to infer dimensions, particularly useful for text elements where height is often determined by font size (em units). Dependencies include React, Typography, and Skeleton.

```jsx
<Typography variant="h1">{loading ? <Skeleton /> : 'h1'}</Typography>
```

--------------------------------

### React Table Customization

Source: https://fuse-react-nextjs-demo.fusetheme.com/documentation/material-ui-components/table

Demonstrates how to customize the appearance and behavior of React table components. This example shows overriding default styles and potentially altering component structure for specific design needs.

```javascript
import React from 'react';
import Table from '@mui/material/Table';
import TableBody from '@mui/material/TableBody';
import TableCell from '@mui/material/TableCell';
import TableContainer from '@mui/material/TableContainer';
import TableHead from '@mui/material/TableHead';
import TableRow from '@mui/material/TableRow';
import Paper from '@mui/material/Paper';

function createData(name, calories, fat, carbs, protein) {
  return {
    name,
    calories,
    fat,
    carbs,
    protein
  };
}

const rows = [
  createData('Frozen yoghurt', 159, 6, 24, 4),
  createData('Ice cream sandwich', 237, 9, 37, 4.3),
  createData('Eclair', 262, 16, 24, 6),
  createData('Cupcake', 305, 3.7, 67, 4.3),
  createData('Gingerbread', 356, 16, 49, 3.9)
];

export default function CustomTable() {
  return (
    <TableContainer component={Paper}>
      <Table sx={{ minWidth: 650 }} aria-label="simple table">
        <TableHead>
          <TableRow>
            <TableCell>Dessert (100g serving)</TableCell>
            <TableCell align="right">Calories</TableCell>
            <TableCell align="right">Fat&nbsp;(g)</TableCell>
            <TableCell align="right">Carbs&nbsp;(g)</TableCell>
            <TableCell align="right">Protein&nbsp;(g)</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {rows.map((row) => (
            <TableRow
              key={row.name}
              sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
            >
              <TableCell component="th" scope="row">
                {row.name}
              </TableCell>
              <TableCell align="right">{row.calories}</TableCell>
              <TableCell align="right">{row.fat}</TableCell>
              <TableCell align="right">{row.carbs}</TableCell>
              <TableCell align="right">{row.protein}</TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </TableContainer>
  );
}

```

--------------------------------

### Basic Checkbox Example - React

Source: https://fuse-react-nextjs-demo.fusetheme.com/documentation/material-ui-components/checkboxes

Demonstrates the fundamental usage of the Checkbox component. No external dependencies are required beyond React.

```jsx
import Checkbox from '@mui/material/Checkbox';

function BasicCheckboxes() {
  return (
    <div>
      <Checkbox {...label} />
      <Checkbox {...label} disabled />
      <Checkbox {...label} checked />
    </div>
  );
}
```

--------------------------------

### Autocomplete Component Example Options (JavaScript)

Source: https://fuse-react-nextjs-demo.fusetheme.com/documentation/material-ui-components/autocomplete

Illustrates how to define the options array for the Autocomplete component. This can be an array of strings or an array of objects, where each object has a 'label' property.

```javascript
const options = [
  { label: 'The Godfather', id: 1 },
  { label: 'Pulp Fiction', id: 2 },
];
// or
const options = ['The Godfather', 'Pulp Fiction'];
```

--------------------------------

### Rating Sizes Example

Source: https://fuse-react-nextjs-demo.fusetheme.com/documentation/material-ui-components/rating

Demonstrates how to adjust the size of the rating component using the `size` prop. Available sizes are 'small', 'medium' (default), and 'large'.

```javascript
import Rating from '@mui/material/Rating';
import Typography from '@mui/material/Typography';
import Box from '@mui/material/Box';

function SizeVariantRating() {
  return (
    <Box
      sx={{
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        '& > legend': {
          mt: 2,
        },
      }}
    >
      <Typography component="legend">Size small</Typography>
      <Rating name="size-small" defaultValue={4} size="small" />
      <Typography component="legend">Size medium</Typography>
      <Rating name="size-medium" defaultValue={4} />
      <Typography component="legend">Size large</Typography>
      <Rating name="size-large" defaultValue={4} size="large" />
    </Box>
  );
}
```

--------------------------------

### Controlled Tooltip Example - React

Source: https://fuse-react-nextjs-demo.fusetheme.com/documentation/material-ui-components/tooltips

Shows how to control the visibility of the Tooltip programmatically using the `open`, `onOpen`, and `onClose` props. This allows for dynamic control over the tooltip's state.

```jsx
import Tooltip from '@mui/material/Tooltip';
import React from 'react';

function ControlledTooltip() {
  const [open, setOpen] = React.useState(false);

  const handleTooltipClose = () => {
    setOpen(false);
  };

  const handleTooltipOpen = () => {
    setOpen(true);
  };

  return (
    <Tooltip
      title="Add To Cart"
      open={open}
      onClose={handleTooltipClose}
      onOpen={handleTooltipOpen}
    >
      <button onClick={handleTooltipOpen}>Controlled</button>
    </Tooltip>
  );
}
```

--------------------------------

### Horizontal Stepper Component Example

Source: https://fuse-react-nextjs-demo.fusetheme.com/documentation/material-ui-components/steppers

Demonstrates the basic usage of a horizontal stepper component. This component guides users through a multi-step process. It requires no external dependencies beyond the core library.

```javascript
Select campaign settings
Create an ad groupAlert message
Create an ad
```

--------------------------------

### Typography Theme Key Example

Source: https://fuse-react-nextjs-demo.fusetheme.com/documentation/material-ui-components/typography

Shows how to leverage the `typography` keys within the theme for styling text, especially when direct use of the Typography component is not feasible. This allows for theme-based text styling.

```jsx
// Example of using theme keys for typography.
// This div's text looks like that of a button.
// Note: Actual code is not provided in the input, only descriptions of usage.
// This is a placeholder representation.
```

--------------------------------

### Masonry Sequential Order Example (React)

Source: https://fuse-react-nextjs-demo.fusetheme.com/documentation/material-ui-components/masonry

Demonstrates the `sequential` prop for the Masonry component. When enabled, items are added from left to right sequentially, rather than being placed in the shortest column to optimize space.

```jsx
import { Masonry } from '@mui/lab';

function SequentialMasonry() {
  return (
    <Masonry columns={3} spacing={1} sequential>
      {Array.from(Array(15)).map((_, index) => (
        <div key={index}>{`Item ${index + 1}`}</div>
      ))}
    </Masonry>
  );
}
```

--------------------------------

### Basic Masonry Layout Example (React)

Source: https://fuse-react-nextjs-demo.fusetheme.com/documentation/material-ui-components/masonry

Demonstrates a fundamental implementation of the Masonry component, suitable for arranging generic content blocks. It acts as a container for various child elements like divs and images, organizing them into columns with consistent width and variable height.

```jsx
import { Masonry } from '@mui/lab';

function BasicMasonry() {
  return (
    <Masonry columns={3} spacing={2}>
      {/* Array of items to be rendered */}
      {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map((item) => (
        <div key={item}>
          {/* Content for each item */}
          Item {item}
        </div>
      ))}
    </Masonry>
  );
}
```

--------------------------------

### Material UI Slide Transition Example

Source: https://fuse-react-nextjs-demo.fusetheme.com/documentation/material-ui-components/transitions

Demonstrates the Slide transition component from Material UI. This component slides its child in from the edge of the screen. The `direction` prop controls the starting edge, and `container` can be used to slide relative to a specific DOM node.

```jsx
import * as React from 'react';
import Slide from '@mui/material/Slide';
import Button from '@mui/material/Button';
import Box from '@mui/material/Box';
import FormControlLabel from '@mui/material/FormControlLabel';
import Switch from '@mui/material/Switch';

export default function SlideTransition() {
  const [checked, setChecked] = React.useState(false);

  const containerRef = React.useRef(null);

  const handleChange = () => {
    setChecked((prev) => !prev);
  };

  return (
    <Box sx={{ height: 200, width: '100%' }} ref={containerRef}>
      <FormControlLabel
        control={<Switch checked={checked} onChange={handleChange} />}
        label="Show"
      />
      <Slide direction="up" in={checked} container={containerRef.current}>
        {(state) => (
          <Box {...state}>
            Slide
          </Box>
        )}
      </Slide>
    </Box>
  );
}
```

--------------------------------

### List Item with Avatar and Icon

Source: https://fuse-react-nextjs-demo.fusetheme.com/documentation/material-ui-components/lists

This example showcases a complex list item configuration that includes both an avatar and an icon, along with primary and secondary text. This setup is suitable for detailed list entries requiring rich visual and textual information, such as user profiles or file entries.

```jsx
import ListItem from '@mui/material/ListItem';
import ListItemAvatar from '@mui/material/ListItemAvatar';
import ListItemText from '@mui/material/ListItemText';
import Avatar from '@mui/material/Avatar';
import ImageIcon from '@mui/icons-material/Image';

// ...

<ListItem>
  <ListItemAvatar>
    <Avatar>
      <ImageIcon />
    </Avatar>
  </ListItemAvatar>
  <ListItemText primary="Single-line item" secondary="Secondary text" />
  <AddShoppingCartIcon />
</ListItem>
```

--------------------------------

### React MUI Switch Component Example

Source: https://fuse-react-nextjs-demo.fusetheme.com/documentation/material-ui-components/switches

Demonstrates the use of the MUI Switch component in a React application. It covers basic usage, label integration, size and color customization, controlled switches with checked and onChange props, and switches with FormGroup. It also covers accessibility concerns.

```jsx
<Switch value="checkedA" inputProps={{ 'aria-label': 'Switch A' }} />
```

--------------------------------

### Popper with React-Spring Example (React)

Source: https://fuse-react-nextjs-demo.fusetheme.com/documentation/material-ui-components/popper

Shows an alternative method for animating Popper component transitions using `react-spring`. This approach provides flexibility in defining complex animation sequences for the Popper's appearance and disappearance. It requires integration with `react-spring`'s animation primitives.

```jsx
import { animated } from '@react-spring/web';

function ReactSpringPopper() {
  const [open, setOpen] = React.useState(false);
  const anchorRef = React.useRef(null);

  const props = useSpring({ opacity: open ? 1 : 0, config: { duration: 350 } });

  const handleToggle = () => {
    setOpen((prevOpen) => !prevOpen);
  };

  return (
    <div>
      <Button ref={anchorRef} onClick={handleToggle}>Toggle Popper</Button>
      <Popper open={open} anchorEl={anchorRef.current} placement="bottom-start">
        <animated.div style={props}>
          <Paper>
            <Typography sx={{ p: 2 }}>The content of the Popper.</Typography>
          </Paper>
        </animated.div>
      </Popper>
    </div>
  );
}
```

--------------------------------

### Tooltip: Using Different Transitions (React)

Source: https://fuse-react-nextjs-demo.fusetheme.com/documentation/material-ui-components/tooltips

Illustrates how to apply different transition effects to the Tooltip component. This example shows the 'GrowFadeZoom' transition, allowing for varied visual feedback when the tooltip appears and disappears.

```jsx
import Tooltip from '@mui/material/Tooltip';
import Grow from '@mui/material/Grow';

function App() {
  return (
    <Tooltip
      title="Add"
      TransitionComponent={Grow}
      TransitionProps={{ timeout: 400 }}
    >
      <span>GrowFadeZoom</span>
    </Tooltip>
  );
}
```

--------------------------------

### Nested Modal Example in JavaScript

Source: https://fuse-react-nextjs-demo.fusetheme.com/documentation/material-ui-components/modal

Illustrates how to implement nested modals, where one modal appears inside another. This example shows a select component within a dialog. It advises caution regarding stacking more than two modals.

```jsx
import * as React from 'react';
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
import Modal from '@mui/material/Modal';
import Select from '@mui/material/Select';
import MenuItem from '@mui/material/MenuItem';
import InputLabel from '@mui/material/InputLabel';
import FormControl from '@mui/material/FormControl';

const style = {
  position: 'absolute',
  top: '50%',
  left: '50%',
  transform: 'translate(-50%, -50%)',
  width: 400,
  bgcolor: 'background.paper',
  border: '2px solid #000',
  boxShadow: 24,
  p: 4,
};

export default function NestedModal() {
  const [open, setOpen] = React.useState(false);
  const handleOpen = () => {
    setOpen(true);
  };
  const handleClose = () => {
    setOpen(false);
  };

  return (
    <React.Fragment>
      <Button onClick={handleOpen}>Open Modal</Button>
      <Modal
        open={open}
        onClose={handleClose}
        aria-labelledby="parent-modal-title"
        aria-describedby="parent-modal-description"
      >
        <Box sx={{ ...style, width: 500 }}>
          <h2 id="parent-modal-title">Text in a modal</h2>
          <p id="parent-modal-description">This is a parent modal.</p>
          <ChildModal />
        </Box>
      </Modal>
    </React.Fragment>
  );
}

function ChildModal() {
  const [open, setOpen] = React.useState(false);
  const handleOpen = () => {
    setOpen(true);
  };
  const handleClose = () => {
    setOpen(false);
  };

  return (
    <React.Fragment>
      <Button onClick={handleOpen}>Open Child Modal</Button>
      <Modal
        open={open}
        onClose={handleClose}
        aria-labelledby="child-modal-title"
        aria-describedby="child-modal-description"
      >
        <Box sx={{ ...style, width: 300 }}>
          <h2 id="child-modal-title">Text in nested modal</h2>
          <p id="child-modal-description">This is a nested modal.</p>
          <FormControl fullWidth>
            <InputLabel id="demo-simple-select-label">Age</InputLabel>
            <Select
              labelId="demo-simple-select-label"
              id="demo-simple-select"
              label="Age"
            >
              <MenuItem value={10}>Ten</MenuItem>
              <MenuItem value={20}>Twenty</MenuItem>
              <MenuItem value={30}>Thirty</MenuItem>
            </Select>
          </FormControl>
        </Box>
      </Modal>
    </React.Fragment>
  );
}
```

--------------------------------

### Interactive Grid Layout Example

Source: https://fuse-react-nextjs-demo.fusetheme.com/documentation/material-ui-components/grid-legacy

Provides an interactive demo to visualize different Grid component settings. Allows exploration of `direction`, `justifyContent`, and `alignItems` properties to dynamically adjust the layout of grid items.

```jsx
<Grid
  container
  direction="row"
  sx={{
    justifyContent: "center",
    alignItems: "center",
  }}
>
  {/* Grid items would go here */}
</Grid>
```

--------------------------------

### Radio Group Customization Example (JavaScript)

Source: https://fuse-react-nextjs-demo.fusetheme.com/documentation/material-ui-components/radio-buttons

Provides an example of advanced customization for radio buttons within a group. This involves styling individual radio buttons using `sx` prop for specific states like checked.

```javascript
import Radio from '@mui/material/Radio';
import RadioGroup from '@mui/material/RadioGroup';
import FormControlLabel from '@mui/material/FormControlLabel';
import FormControl from '@mui/material/FormControl';

function CustomizationRadios() {
  return (
    <FormControl>
      <RadioGroup
        aria-labelledby="custom-radio-buttons-group-label"
        defaultValue="female"
        name="customized-radio-buttons-group"
      >
        <FormControlLabel {...controlProps('female')} control={<Radio />} label="Female" />
        <FormControlLabel {...controlProps('male')} control={<Radio />} label="Male" />
        <FormControlLabel
          {...controlProps('other')}
          control={<Radio />}
          label="Other (Disabled option)"
          disabled={true}
        />
      </RadioGroup>
    </FormControl>
  );
}

const controlProps = (item) => ({
  checked: 'female' === item,
});

export default CustomizationRadios;
```

--------------------------------

### Masonry Column Configuration (React)

Source: https://fuse-react-nextjs-demo.fusetheme.com/documentation/material-ui-components/masonry

Demonstrates how to configure the number of columns in the Masonry component using the `columns` prop. It also shows how to apply responsive values to the `columns` prop, allowing the layout to adapt to different screen sizes.

```jsx
import { Masonry } from '@mui/lab';

function ColumnsMasonry() {
  return (
    <Masonry columns={4} spacing={1}>
      {Array.from(Array(10)).map((_, index) => (
        <div key={index}>{`Item ${index + 1}`}</div>
      ))}
    </Masonry>
  );
}

function ResponsiveColumnsMasonry() {
  return (
    <Masonry
      columns={{
        xs: 1,
        sm: 2,
        md: 3,
        lg: 4,
        xl: 5,
      }}
      spacing={1}
    >
      {Array.from(Array(10)).map((_, index) => (
        <div key={index}>{`Item ${index + 1}`}</div>
      ))}
    </Masonry>
  );
}
```

--------------------------------

### Complex Grid Layout Example

Source: https://fuse-react-nextjs-demo.fusetheme.com/documentation/material-ui-components/grid-legacy

Demonstrates the construction of complex layouts using the Grid component, going beyond standard Material Design guidelines. This example showcases the flexibility of the Grid for building intricate user interfaces.

```jsx
/* Complex Grid Layout Code Snippet */
// This placeholder represents the code for a complex grid layout.
// Actual implementation would involve nested Grid components and various props.
```

--------------------------------

### FAB Size Variation Example

Source: https://fuse-react-nextjs-demo.fusetheme.com/documentation/material-ui-components/floating-action-button

Illustrates how to change the size of a Floating Action Button (FAB) using the `size` prop. FABs default to 'large', but can be set to 'small' for different UI needs. This example shows both large and small FABs.

```javascript
import Button from '@mui/material/Button';

function FABSize() {
  return (
    <>
      <Button variant="contained" sx={{ m: 1 }} size="large">
        Large
      </Button>
      <Button variant="contained" sx={{ m: 1 }} size="small">
        Small
      </Button>
    </>
  );
}
```

--------------------------------

### Tiptap Editor Basic Usage (React)

Source: https://fuse-react-nextjs-demo.fusetheme.com/documentation/third-party-components/tiptap-editor

Demonstrates the basic integration and usage of the Tiptap headless editor within a React component. This example shows how to initialize the editor and include common toolbar actions for rich text editing.

```tsx
import React from 'react';
import { useEditor, EditorContent } from '@tiptap/react';
import StarterKit from '@tiptap/starter-kit';

const MailComposeEditor = () => {
  const editor = useEditor({
    extensions: [
      StarterKit,
    ],
    content: '<p>Hello World!</p>',
  });

  return (
    <div>
      <EditorContent editor={editor} />
    </div>
  );
};

export default MailComposeEditor;
```

--------------------------------

### Extended Floating Action Button (FAB) Example

Source: https://fuse-react-nextjs-demo.fusetheme.com/documentation/material-ui-components/floating-action-button

Shows how to create an extended Floating Action Button (FAB), which includes text and an icon. Extended FABs are used when the primary action requires more descriptive text. This example displays an 'Extended' FAB.

```javascript
import Button from '@mui/material/Button';

function ExtendedFAB() {
  return (
    <Button variant="contained" sx={{ m: 1 }}>
      Extended
    </Button>
  );
}
```
Tokens:
Raw