React MUI MessageBoxes

mui-message-box is a message box component using mui 5.^, developed and maintained by Pradeep([email protected]).

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>
  );
}

Demo

Demo

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Please make sure to update tests as appropriate.

License

MIT