{"id":27093509,"url":"https://github.com/theo-sim-dev/mui-alert-provider","last_synced_at":"2026-02-25T07:35:10.660Z","repository":{"id":286331939,"uuid":"961088233","full_name":"theo-sim-dev/mui-alert-provider","owner":"theo-sim-dev","description":"📣Make your alerts float! A lightweight provider for MUI Alert that will fit into any web UI.","archived":false,"fork":false,"pushed_at":"2025-05-02T02:47:36.000Z","size":3716,"stargazers_count":0,"open_issues_count":2,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-07-08T22:07:57.730Z","etag":null,"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"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/theo-sim-dev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-04-05T18:16:40.000Z","updated_at":"2025-06-04T01:40:13.000Z","dependencies_parsed_at":"2025-04-12T03:19:46.085Z","dependency_job_id":null,"html_url":"https://github.com/theo-sim-dev/mui-alert-provider","commit_stats":null,"previous_names":["theo-sim-dev/mui-alert-provider"],"tags_count":12,"template":false,"template_full_name":null,"purl":"pkg:github/theo-sim-dev/mui-alert-provider","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/theo-sim-dev%2Fmui-alert-provider","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/theo-sim-dev%2Fmui-alert-provider/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/theo-sim-dev%2Fmui-alert-provider/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/theo-sim-dev%2Fmui-alert-provider/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/theo-sim-dev","download_url":"https://codeload.github.com/theo-sim-dev/mui-alert-provider/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/theo-sim-dev%2Fmui-alert-provider/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265246141,"owners_count":23734109,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["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"],"created_at":"2025-04-06T08:24:23.339Z","updated_at":"2026-02-25T07:35:10.597Z","avatar_url":"https://github.com/theo-sim-dev.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# MUI Alert Provider\n\n[![npm](https://img.shields.io/npm/v/mui-alert-provider?color=orange)](https://www.npmjs.com/package/mui-alert-provider)\n[![license](https://img.shields.io/badge/license-MIT-green)](https://www.npmjs.com/package/mui-alert-provider)\n[![typescript](https://img.shields.io/badge/typescript-blue?logo=typescript\u0026logoColor=f5f5f5)](https://www.npmjs.com/package/mui-alert-provider)\n[![react](https://img.shields.io/badge/react-blue?logo=react)](https://www.npmjs.com/package/mui-alert-provider)\n\nMake your alerts float! A lightweight provider for Material-UI’s Alert that fits seamlessly into any web UI.\n\nBuild a stack of [MUI Alert](https://mui.com/material-ui/react-alert/?srsltid=AfmBOorG16fDWlZUFpNDld6CbDRdpPOA8eTPa9eEriOYl9CywGZFowmu) in just minutes🚀\n\n## Demo\n\n[![Edit mui-alert-provider demo](https://codesandbox.io/static/img/play-codesandbox.svg)](\nhttps://codesandbox.io/p/sandbox/mui-alert-provider-demo-kj6mjz)\n\n### Desktop View\n![Desktop View](./public/desktop.gif)\n\n### Mobile View\n![Mobile View](./public/mobile.gif)\n\n## Features\n\n- **Floating Stacks of MUI Alerts**  \n  Display beautifully-styled, floating stacks of MUI Alerts that integrate seamlessly into any web UI. Fully customizable to match your design system.\n\n- **Easy Integration with Context API \u0026 React Hooks**  \n  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.\n\n- **Lightweight \u0026 Performant**  \n  Designed to be super lightweight with minimal impact on your bundle size and blazing-fast performance.\n\n- **Accessible by Design**  \n  Follows MUI’s accessibility standards to deliver an inclusive and user-friendly experience for all users.\n\n\n## Installation\n\n```bash\nnpm install mui-alert-provider\n```\n\nor\n\n```bash\nyarn add mui-alert-provider\n```\n\n## Usage\n\n[Check out this playground](\nhttps://codesandbox.io/p/sandbox/mui-alert-provider-demo-kj6mjz) 🎮\n\nWrap your application with the `AlertProvider`. If you're using the `ThemeProvider` from MUI, ensure that the `AlertProvider` is a child of it.\n\n```jsx\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport { AlertProvider } from 'mui-alert-provider';\n\nconst App = () =\u003e (\n\t\u003cAlertProvider\u003e\n\t\t{/* Your application components */}\n\t\u003c/AlertProvider\u003e\n);\n\nReactDOM.render(\u003cApp /\u003e, document.getElementById('root'));\n```\n\nTrigger 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.\n\n```jsx\nimport { useAlert } from 'mui-alert-provider';\n\nconst MyComponent = () =\u003e {\n\tconst {addAlert} = useAlert();\n\n\tconst handleClick = () =\u003e {\n\t\taddAlert({\n\t\t\tmessage: \"Please enter your name to continue\",\n\t\t\tseverity: \"error\",\n\t\t})\n\t};\n\n\treturn \u003cbutton onClick={handleClick}\u003eShow Alert\u003c/button\u003e;\n};\n```\n\n## API\n\n### `AlertProvider`\n\nWraps your application and provides alert context. \n\n#### Props\n\n| Prop Name         | Type       | Default   | Description                                                                 |\n|-------------------|------------|-----------|-----------------------------------------------------------------------------|\n| `children`        | `node`     | N/A       | React nodes to render inside the provider.                                 |\n| `limit`           | `number`   | `4`       | The maximum number of alerts that can be displayed simultaneously.                             |\n| `mobileLimit`     | `number`   | `1`       | The maximum number of alerts that can be displayed simultaneously on screens smaller than `mobileBreakpoint`.                       |\n| `position`        | `AlertPosition`   | `\"top-right\"` | Specifies where the alerts will appear on the screen. Options include `\"top-right\"`, `\"top-left\"`, `\"bottom-left\"`, or `\"bottom-right\"`. |\n| `width`           | `string`   | `\"20%\"`       | The width of the alert container. Accepts any valid CSS width value. On screens smaller than `mobileBreakpoint`, it automatically adjusts to 100% for optimal mobile responsiveness.\t|\n| `minWidth`        | `string`   | `\"280px\"`     | Sets the minimum width of the alert container. Accepts any valid CSS width value. On screens smaller than `mobileBreakpoint`, it automatically adjusts to 100% for optimal mobile responsiveness. |\n| `containerSx`     | `SxProps`   | `{}`          | A custom MUI `sx` object to style the container that holds the stack of alerts.\t|\n| `duration`        | `number`   | `300`     | The time (in milliseconds) that the alert's animation lasts, including its appearance and disappearance transitions.    |\n| `muiAlertProps`   | `AlertProps`   | `{}`       | Props to be passed directly to the underlying [MUI Alert](https://mui.com/material-ui/api/alert/) component. |\n| `muiStackProps`   | `StackProps`   | `{}`       | Props to be passed directly to the underlying [MUI Stack](https://mui.com/material-ui/api/stack/) component. |\n| `mobileBreakpoint` | `number`   | `600`     | The breakpoint width in pixels to consider a device as mobile. Alerts will adjust their behavior accordingly. 600px by default. |\n\n### `useAlert`\n\n#### Methods\n\n| Method                          | Type                              | Description                                                                                     |\n|---------------------------------|-----------------------------------|-------------------------------------------------------------------------------------------------|\n| `addAlert({ message, severity })` | `(alert: Alert) =\u003e void`          | Adds a new alert to the stack. `severity` defaults to `\"success\"` as defined by MUI. |\n\n## Contributing\n\nContributions are welcome! Please open an issue or submit a pull request.\n\n## License\n\nThis project is licensed under the [MIT License](LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftheo-sim-dev%2Fmui-alert-provider","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftheo-sim-dev%2Fmui-alert-provider","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftheo-sim-dev%2Fmui-alert-provider/lists"}