https://github.com/theo-sim-dev/mui-alert-provider
📣Make your alerts float! A lightweight provider for MUI Alert that will fit into any web UI.
https://github.com/theo-sim-dev/mui-alert-provider
alert alerts context context-api hooks material-ui mui mui-alert notification provider react react-components react-context react-custom-hooks react-hooks reactjs toast typescript
Last synced: 3 months ago
JSON representation
📣Make your alerts float! A lightweight provider for MUI Alert that will fit into any web UI.
- Host: GitHub
- URL: https://github.com/theo-sim-dev/mui-alert-provider
- Owner: theo-sim-dev
- License: mit
- Created: 2025-04-05T18:16:40.000Z (3 months ago)
- Default Branch: main
- Last Pushed: 2025-04-12T01:45:15.000Z (3 months ago)
- Last Synced: 2025-04-12T03:19:18.533Z (3 months ago)
- Topics: alert, alerts, context, context-api, hooks, material-ui, mui, mui-alert, notification, provider, react, react-components, react-context, react-custom-hooks, react-hooks, reactjs, toast, typescript
- Language: TypeScript
- Homepage:
- Size: 3.53 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# MUI Alert Provider
[](https://www.npmjs.com/package/mui-alert-provider)
[](https://www.npmjs.com/package/mui-alert-provider)
[](https://www.npmjs.com/package/mui-alert-provider)
[](https://www.npmjs.com/package/mui-alert-provider)
Make your alerts float! A lightweight provider for Material-UI’s Alert that fits seamlessly into any web UI.
Build a stack of [MUI Alert](https://mui.com/material-ui/react-alert/?srsltid=AfmBOorG16fDWlZUFpNDld6CbDRdpPOA8eTPa9eEriOYl9CywGZFowmu) in just minutes🚀
## Demo
[](
https://codesandbox.io/p/sandbox/mui-alert-provider-demo-kj6mjz)
### Desktop View
### Mobile View
## Features
- **Floating Stacks of MUI Alerts**
Display beautifully-styled, floating stacks of MUI Alerts that integrate seamlessly into any web UI. Fully customizable to match your design system.
- **Easy Integration with Context API & React Hooks**
Built on the [Context API](https://react.dev/reference/react/hooks#context-hooks) and [React Hooks](https://react.dev/learn/reusing-logic-with-custom-hooks) for fast setup. Easily trigger alerts from anywhere in your React component tree.
- **Lightweight & Performant**
Designed to be super lightweight with minimal impact on your bundle size and blazing-fast performance.
- **Accessible by Design**
Follows MUI’s accessibility standards to deliver an inclusive and user-friendly experience for all users.
## Installation
```bash
npm install mui-alert-provider
```
or
```bash
yarn add mui-alert-provider
```
## Usage
Wrap your application with the `AlertProvider`.
If you're using the `ThemeProvider` from MUI, ensure that the `AlertProvider` is a child of it.
```jsx
import React from 'react';
import ReactDOM from 'react-dom';
import { AlertProvider } from 'mui-alert-provider';
const App = () => (
{/* Your application components */}
);
ReactDOM.render(, document.getElementById('root'));
```
Trigger alerts from any part of your application using the `useAlert` hook.
This hook provides access to the `addAlert` method, allowing you to add a new alert to the stack.
```jsx
import { useAlert } from 'mui-alert-provider';
const MyComponent = () => {
const {addAlert} = useAlert();
const handleClick = () => {
addAlert({
message: "Please enter your name to continue",
severity: "error",
})
};
return Show Alert;
};
```
## API
### `AlertProvider`
Wraps your application and provides alert context.
#### Props
| Prop Name | Type | Required | Default | Description |
|-------------------|------------|----------|-----------|-----------------------------------------------------------------------------|
| `children` | `node` | Yes | N/A | React nodes to render inside the provider. |
| `limit` | `number` | No | `4` | The maximum number of alerts that can be displayed simultaneously. |
| `mobileLimit` | `number` | No | `1` | The maximum number of alerts that can be displayed simultaneously on screens with a width smaller than `mobileBreakpoint`. |
| `width` | `string` | No | `"20%"` | Specifies the width of the alert container. Accepts any valid CSS width value. On resolutions smaller than `mobileBreakpoint`x, it will automatically adjust to 100% for better mobile responsiveness. |
| `minWidth` | `string` | No | `"280px"` | Specifies the minimum width of the alert container. Accepts any valid CSS width value. On resolutions smaller than `mobileBreakpoint`x, it will automatically adjust to 100% for better mobile responsiveness. |
| `containerSx` | `object` | No | `{}` | The `sx` prop to customize the styling of the alert container. Accepts any valid MUI `sx` object. |
| `duration` | `number` | No | `300` | The time (in milliseconds) that the alert's animation lasts, including its appearance and disappearance transitions. |
| `muiAlertProps` | `object` | No | `{}` | Props to be passed directly to the underlying [MUI Alert](https://mui.com/material-ui/api/alert/) component. |
| `muiStackProps` | `object` | No | `{}` | Props to be passed directly to the underlying [MUI Stack](https://mui.com/material-ui/api/stack/) component. |
| `mobileBreakpoint` | `number` | No | `600` | The breakpoint width in pixels to consider a device as mobile. Alerts will adjust their behavior accordingly. |
### `useAlert`
Hook to access alert functions.
#### Methods
| Method | Description |
|---------------------------------|-------------------------------------------------------------------------------------------------|
| `addAlert({ message, severity })` | Adds a new alert to the stack. `severity` defaults to `"success"`, as defined by MUI. |
## Contributing
Contributions are welcome! Please open an issue or submit a pull request.
## License
This project is licensed under the [MIT License](LICENSE).