Mui-message-box NPM

React MUI MessageBoxes

mui-message-box is a message box component using mui 5.^, developed and maintained by Pradeep(kpradeeprao@gmail.com).

Installation

Use the package manager to install mui-message-box.

yarn add mui-message-box

npm i mui-message-box

Usage

function Actions() {
  const { showMessage } = useMessageBoxManager();
  return (
    <Button
      onClick={() =>
        showMessage({
          id: 'message1',
          header: 'Are you sure!',
          message:
            'You are about to delete the selected records. Are you sure you want to continue?',
          iconType: MessageBoxIconEnum.Question,
          primaryButtonText: 'Yes, I am sure',
          secondaryButtonText: 'Hmm, Let me check again.',
          showSecondary: true,
        })
      }
    >
      Question
    </Button>
  );
}

export function App() {
  return (
    <MessageBoxManagerProvider>
      <Actions />
    </MessageBoxManagerProvider>
  );
}

function Actions() {
  const { showMessage } = useMessageBoxManager();
  return (
    <Button
      onClick={() =>
        showMessage({
          id: 'message1',
          header: 'Are you sure!',
          message: (
            <Box>
              <Typography variant={'h5'}>Are you Sure?</Typography>
              <Typography variant={'body2'}>
                You are about to delete the selected records. Are you sure you
                want to continue?
              </Typography>
            </Box>
          ),
          icon: <MySvgIcon></MySvgIcon>,
          primaryButtonText: 'Yes, I am sure',
          secondaryButtonText: 'Hmm, Let me check again.',
          showSecondary: true,
        })
      }
    >
      Question
    </Button>
  );
}

export function App() {
  return (
    <MessageBoxManagerProvider>
      <Actions />
    </MessageBoxManagerProvider>
  );
}