How to make a loading button in MUI? - reactjs

I am using react with MUI framework and I was wondering how can I create an loading button using this framework?
I am looking for something similar to this.

To the best of my knowledge, there is no single component that accomplishes this out of the box in material-ui. However, you can implement your own easily using CircularProgress.
Assuming you are using material-ui v1, here's a rough example. First, I create a LoadingButton that accepts a loading prop - if that prop is true, I display a CircularProgress indicator. It also accepts a done prop - if that's true, the button clears the progress indicator and becomes a checkmark to show success.
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from 'material-ui/styles';
import Button from 'material-ui/Button';
import { CircularProgress } from 'material-ui/Progress';
import Check from 'material-ui-icons/Check';
const styles = theme => ({
button: {
margin: theme.spacing.unit,
},
});
const LoadingButton = (props) => {
const { classes, loading, done, ...other } = props;
if (done) {
return (
<Button className={classes.button} {...other} disabled>
<Check />
</Button>
);
}
else if (loading) {
return (
<Button className={classes.button} {...other}>
<CircularProgress />
</Button>
);
} else {
return (
<Button className={classes.button} {...other} />
);
}
}
LoadingButton.defaultProps = {
loading: false,
done: false,
};
LoadingButton.propTypes = {
classes: PropTypes.object.isRequired,
loading: PropTypes.bool,
done: PropTypes.bool,
};
export default withStyles(styles)(LoadingButton);
You can use the LoadingButton as shown in the following example, which uses state to set the appropriate prop on the button.
import React from 'react';
import LoadingButton from './LoadingButton';
class ControlledButton extends React.Component {
constructor(props) {
super(props);
this.state = { loading: false, finished: false };
}
render() {
const { loading, finished } = this.state;
const setLoading = !finished && loading;
return (
<div>
<LoadingButton
loading={setLoading}
done={finished}
onClick={() => {
// Clicked, so show the progress dialog
this.setState({ loading: true });
// In a 1.5 seconds, end the progress to show that it's done
setTimeout(() => { this.setState({ finished: true })}, 1500);
}}
>
Click Me
</LoadingButton>
</div>
);
}
}
export default ControlledButton;
You can of course tweak the styling and functionality to meet your exact needs.

In the newer versions of MUI, you can use LoadingButton component, it's currently in the lab package. This is just a wrapper of the Button with a loading prop. You can customize the loadingIndicator component and its position. See the example below:
import LoadingButton from '#mui/lab/LoadingButton';
<LoadingButton loading={loading}>
Text
</LoadingButton>
<LoadingButton
endIcon={<SendIcon />}
loading={loading}
loadingPosition="end"
variant="contained"
>
Send
</LoadingButton>

Related

Error: out of memory when trying to run create-react-app

When I run npm start in chrome (create-react-app) it takes a while to load and then it crashes. the Error displays "out of memory". I cleared all my tabs and cache, and since other apps run just fine I have been able to tell the error is in the code. When I removed the Reserve_Button Component the application ran just fine. I think there may be some sort of memory leak related to SetState but I'm relatively new to React so there is not much more I can tell.
import React from "react";
import "./reserve_button.css";
// import Reserve_Form from "./Reserve_Form";
// import { connect } from "react-redux";
// import { submitreservation } from "../../Actions/index";
import Modal from "./modal";
class Button extends React.Component {
state = {
firstname: "",
Lastname: "",
};
showmodal = {
open: false,
};
// onSubmit = (formValues) => {
// this.props.submitreservation(formValues);
// };
showModal() {
if (this.state.open) {
return (
<Modal
open={this.state.open}
onDismiss={() => this.setState({ open: false })}
title="Modal Title"
content="Modal Body"
actions={<div className="ui button">Button</div>}
/>
);
}
}
render() {
return (
<div className="body">
<Button
onClick={() => this.setState({ open: !this.state.open })}
className="neon-button"
>
Reserve session
</Button>
{this.showModal()}
</div>
);
}
}
// <Reserve_Form onSubmit={this.onSubmit} />;
// export default connect(null, { submitreservation })(Button);
export default Button;
this is the Modal:
import React from "react";
import ReactDOM from "react-dom";
const Modal = (props) => {
return ReactDOM.createPortal(
<div onClick={props.onDismiss}>
<div onClick={(e) => e.stopPropagation()}>
<i onClick={props.onDismiss}></i>
<div className="header">{props.title}</div>
<div className="content">{props.content}</div>
<div className="actions">{props.actions}</div>
</div>
</div>,
document.querySelector("section")
);
};
export default Modal;
there are no set class names in a CSS file for the modal but I don't think that CSS would be the source of the problem.
UPDATE: when I console log this.state.open it prints "false" like 1000 times a second
There is an optimization you can make to your code. Perhaps it will help fix the error:
Instead of
<Button
onClick={() => this.setState({ open: !this.state.open })}
className="neon-button"
>
when relying on the previous state of a react component use the previous state to update the value. It looks something like this:
<Button
onClick={() => this.setState((prevState) => { open: !prevState.open })}
className="neon-button"
>
By doing this, we are referencing the previous state of this.state.open. This is particularly important as not all state updates happen instantaneously and so there is a possibility of referencing an older value of this.state.open in your approach.

Snackbar can't give width and handleClose

I can't give 100% width on the snackbar and I also have a snackbarClose method but I can't implement it on the snackbar. I also want a button 'X' which button will perform the snackbarClose method.
CodeSandbox : https://codesandbox.io/s/xenodochial-kapitsa-f5yd7?file=/src/Demo.js:693-706
import React, { Component } from "react";
import { Container, Grid, Button, Snackbar } from "#material-ui/core";
import MuiAlert from "#material-ui/lab/Alert";
import { withStyles } from "#material-ui/core/styles";
const styles = (theme) => ({});
function Alert(props) {
return <MuiAlert elevation={6} variant="filled" {...props} />;
}
class Demo extends Component {
constructor() {
super();
this.state = {
snackbaropen: false,
snackbarmsg: "",
severity: ""
};
this.onClick = this.onClick.bind(this);
}
onClick = (event) => {
this.setState({
snackbaropen: true,
snackbarmsg: "Data Saved",
severity: "success"
});
};
snackbarClose = (event) => {
this.setState({ snackbaropen: false });
};
render() {
const { classes } = this.props;
return (
<React.Fragment>
<Container>
<Grid container spacing={2}>
<Grid item xs={12} sm={6} md={6} lg={6} xl={6}>
<Button
variant="contained"
color="primary"
onClick={this.onClick}
>
Submit
</Button>
<Snackbar
open={this.state.snackbaropen}
autoHideDuration={3000}
onClose={this.snackbarClose}
>
<Alert severity={this.state.severity}>
{this.state.snackbarmsg}
</Alert>
</Snackbar>
</Grid>
</Grid>
</Container>
</React.Fragment>
);
}
}
export default withStyles(styles, { withTheme: true })(Demo);
If you want 100% width on snackbar, you need to specify width for Alert and Snackbar component and for close button you need to specify onClose function on Alert component.
<Snackbar
open={this.state.snackbaropen}
autoHideDuration={3000}
onClose={this.snackbarClose}
style={{ width: "100%" }} // specify width 100%
>
<Alert
onClose={this.snackbarClose} // specify onClose method
severity={this.state.severity}
style={{ width: "100%" }} // specify width 100%
>
{this.state.snackbarmsg}
</Alert>
</Snackbar>
For snackback closing on outside click, you need to change close function like below:-
snackbarClose = (event, reason) => {
if (reason === 'clickaway') {
return;
}
this.setState({ snackbaropen: false });
};
Demo: https://codesandbox.io/s/heuristic-khayyam-xo464
This is so complicated to solve problem.
What React version used?
If you used React(over 16.8), I recommend solution I used.
Use React.createContext, React.useContext
Use React.useReducer
Make custom Hook like useSnackBar
Mount SnackBarProvider on the App
import React from 'react';
import ToastContext, { ToastProps } from './ToastContext';
const useToast = () => {
const [, dispatch] = React.useContext(ToastContext);
const message = (toast: ToastProps) => {
dispatch({
type: 'ADD_TOAST',
payload: toast,
});
};
return message;
};
export { useToast };
export default useToast;
const ToastProvider: React.FC<ToastProviderProps> = ({
children,
placement = 'top-right',
timeout = 5000,
}) => {
const [toasts, dispatch] = React.useReducer(toastReducer, []);
return (
<ToastContext.Provider value={[toasts, dispatch]}>
<ToastProviderWrapper>
<ToastProviderContainer className={classnames(placement)}>
{toasts.map((toast, index) => (
<ToastCard {...toast} key={index} timeout={timeout} />
))}
</ToastProviderContainer>
</ToastProviderWrapper>
{children}
</ToastContext.Provider>
);
};
const Index = () => (
<ToastProvider>
<App />
</ToastProvider>
);
const rootElement = document.getElementById('root');
ReactDOM.render(<Index />, rootElement);
You can give data through dispatch(action), reducers
You can Dispatch event all the pages.
These Doms were rendered Root Element like React.Portal. then you can edit global position styles as system.
The SnackBar component delegates to or inherits its style or appearance from its children component, so you can instead adjust the width of the Alert component inside the SnackBar.
<Alert style={{ width: "100%" }} severity={this.state.severity}>
{this.state.snackbarmsg}
</Alert>
This should also adjust the width of the SnackBar component and make it fullwidth.

Show MaterialUi snackbar by method

I want to show message in material.ui by only call method not ading component to parent component (like toastify.js). So, I wrote example like below. But I couldn't call showSnack() method. How can I achieve this?
Note: I don't want add component to demo js like < SnackbarHelper />. I only want show snackbar calling by function.
CODESANDBOX LINK
Demo.js
import React from "react";
import Button from "#material-ui/core/Button";
import SnackHelper from "./snackHelper";
export default function PositionedSnackbar() {
function showMessage() {
console.log("I want call snackHelper.showSnack");
// snackHelper.showSnack();
}
return (
<div>
<Button variant="contained" onClick={() => showMessage()}>
SHOW MESSAGE
</Button>
</div>
);
}
snackbarHelper.js
import React from "react";
import Snackbar from "#material-ui/core/Snackbar";
export default function SnackHelper() {
const [state, setState] = React.useState({
open: false
});
const { vertical, horizontal, open } = state;
const showSnack = (newState) => () => {
setState({ open: true, ...newState });
};
const handleClose = () => {
setState({ ...state, open: false });
};
return (
<div>
<Snackbar
anchorOrigin={{ vertical, horizontal }}
open={open}
onClose={handleClose}
message=""
key={vertical + horizontal}
/>
</div>
);
}
I found solution in this article for same thing what I was looking. Only difference is, this is for confirmation dialog and written by typescript. But, it can be easily changed to toast message by javascript. https://dev.to/dmtrkovalenko/the-neatest-way-to-handle-alert-dialogs-in-react-1aoe
You can get working example code https://codesandbox.io/s/neat-dialogs-3h5ou?from-embed=&file=/src/ConfirmationService.tsx

How can I convert popover MATERIAL-UI functional component to class based component?

I'm trying to convert this functional component to class based component. I have tried for several hours but could not find where to place these const variables in component. If someone could write it out in class based component it will highly appreciated.
const useStyles = makeStyles(theme => ({
typography: {
padding: theme.spacing(2),
},
}));
function SimplePopper() {
const classes = useStyles();
const [anchorEl, setAnchorEl] = React.useState(null);
function handleClick(event) {
setAnchorEl(anchorEl ? null : event.currentTarget);
}
const open = Boolean(anchorEl);
const id = open ? 'simple-popper' : null;
return (
<div>
<Button aria-describedby={id} variant="contained" onClick={handleClick}>
Toggle Popper
</Button>
<Popper id={id} open={open} anchorEl={anchorEl} transition>
{({ TransitionProps }) => (
<Fade {...TransitionProps} timeout={350}>
<Paper>
<Typography className={classes.typography}>The content of the Popper.</Typography>
</Paper>
</Fade>
)}
</Popper>
</div>
);
}
export default SimplePopper;
import React, { Component } from "react";
import { createMuiTheme } from "#material-ui/core/styles";
import Typography from "#material-ui/core/Typography";
import Button from "#material-ui/core/Button";
import Fade from "#material-ui/core/Fade";
import Paper from "#material-ui/core/Paper";
import Popper from "#material-ui/core/Popper";
import { withStyles } from "#material-ui/styles";
const theme = createMuiTheme({
spacing: 4
});
const styles = {
typography: {
padding: theme.spacing(2)
}
};
class SimplePopper extends Component {
constructor(props) {
super(props);
this.state = { anchorEl: null, open: false };
}
flipOpen = () => this.setState({ ...this.state, open: !this.state.open });
handleClick = event => {
this.state.ancherEl
? this.setState({ anchorEl: null })
: this.setState({ anchorEl: event.currentTarget });
this.flipOpen();
};
render() {
const open = this.state.anchorEl === null ? false : true;
console.log(this.state.anchorEl);
console.log(this.state.open);
const id = this.state.open ? "simple-popper" : null;
const { classes } = this.props;
return (
<div>
<Button
aria-describedby={id}
variant="contained"
onClick={event => this.handleClick(event)}
>
Toggle Popper
</Button>
<Popper
id={id}
open={this.state.open}
anchorEl={this.state.anchorEl}
transition
>
{({ TransitionProps }) => (
<Fade {...TransitionProps} timeout={350}>
<Paper>
<Typography className={classes.typography}>
The content of the Popper.
</Typography>
</Paper>
</Fade>
)}
</Popper>
</div>
);
}
}
export default withStyles(styles)(SimplePopper);
First thing one need to understand is, how class based and functional components work. Also, when and where you use it.
In short, I can say functional components are Used for presenting static data. And class based are Used for dynamic source of data.
Here are few links for your reference.
Class based component vs Functional components what is the difference ( Reactjs ) and React functional components vs classical components
To answer your specific question.
import React, { Component } from 'react';
import { withStyles, makeStyles } from '#material-ui/styles';
const useStyles = makeStyles(theme => ({
typography: {
padding: theme.spacing(2),
},
}));
class SimplePopper extends Component {
constructor(props){
super(props)
this.state = { anchorEl: null, setAnchorEl: null }; <--- Here see the state creation
this.handleClick= this.handleClick.bind(this);
}
handleClick(event) {
const { anchorEl, setAnchorEl } = this.state; <--- Here accessing the state
setAnchorEl(anchorEl ? null : event.currentTarget);
}
render() {
const { anchorEl, setAnchorEl } = this.state; <--- Here accessing the state
const open = Boolean(anchorEl);
const id = open ? 'simple-popper' : null;
const { classes } = this.props;
return (
<div>
............Rest of the JSX............
</div>
);
}
}
export default withStyles(useStyles)(SimplePopper);
Note that here I've used withStyles to wrap the style to your component. So, that the styles will be available as classNames.
Explore the difference and convert the rest
This is more enough to begin with.

How to hide spinner component

I am trying to use the react.js spinner component and I can't figure out how I to hide it once my task is complete.
Here is a simple codepen where I am using hidden property. I will set it up to false or true depending on if I want to show it or not:
https://codepen.io/manish_shukla01/pen/GLNOyw
<Spinner hidden={true} size={SpinnerSize.large} label="manish's large spinned" />
You need to use conditional rendering to hide/show the spinner. You can define a component state then can set it up to false or true depending on if you want to show it or not.
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
hidden: false
};
}
render() {
return (
<div className="App">
{!this.state.hidden && <SpinnerBasicExample />}
<h2>Start editing to see some magic happen!</h2>
</div>
);
}
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
For more you can read this https://reactjs.org/docs/conditional-rendering.html
Conditional rendering using state.
In React, you can create distinct components that encapsulate behavior you need. Then, you can render only some of them, depending on the state of your application.
Working example (click on the Dashboard tab):
containers/Dashboard
import isEmpty from "lodash/isEmpty";
import React, { Component } from "react";
import api from "../../utils/api";
import DisplayUser from "../../components/DisplayUser";
import DisplaySignUp from "../../components/DisplaySignUp";
import Spinner from "../../components/Spinner";
class Dashboard extends Component {
state = {
isLoading: true,
currentUser: {}
};
componentDidMount = () => {
this.fetchUsers();
};
fetchUsers = async () => {
try {
const res = await api.get(`/users/1`);
setTimeout(() => {
this.setState({ currentUser: res.data, isLoading: false });
}, 1500);
} catch (e) {
console.error(e.toString());
}
};
// the below can be read like so:
// if "isLoading" is true... then display a spinner
// else if "currentUser" is not empty... then display the user details
// else show a signup message
render = () =>
this.state.isLoading ? (
<Spinner />
) : !isEmpty(this.state.currentUser) ? (
<DisplayUser currentUser={this.state.currentUser} />
) : (
<DisplaySignUp />
);
}
export default Dashboard;
For what you intend to do, just adding the hidden prop won't work as that is not an expected attribute of the Spinner component. I think what you need to do is to introduce conditional rendering in your component. Kindly see implementation below:
import * as React from 'react';
import { render } from 'react-dom';
import {
PrimaryButton,
Spinner,
SpinnerSize,
Label,
IStackProps,
Stack
} from 'office-ui-fabric-react';
import './styles.css';
const { useState } = React;
const SpinnerBasicExample: React.StatelessComponent = () => {
// This is just for laying out the label and spinner (spinners don't have to be inside a Stack)
const rowProps: IStackProps = { horizontal: true, verticalAlign: 'center' };
const tokens = {
sectionStack: {
childrenGap: 10
},
spinnerStack: {
childrenGap: 20
}
};
return (
<Stack tokens={tokens.sectionStack}>
<Stack {...rowProps} tokens={tokens.spinnerStack}>
<Label>Extra small spinner</Label>
<Spinner size={SpinnerSize.xSmall} />
</Stack>
<Stack {...rowProps} tokens={tokens.spinnerStack}>
<Label>Small spinner</Label>
<Spinner size={SpinnerSize.small} />
</Stack>
</Stack>
);
};
function App() {
const [hidden, setHidden] = useState(false);
return (
<div className="App">
{hidden && <SpinnerBasicExample />}
<PrimaryButton
data-automation-id="test"
text={!hidden ? 'Show spinner' : 'Hide spinner'}
onClick={() => setHidden(!hidden)}
allowDisabledFocus={true}
/>
</div>
);
}

Resources