-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
e21e96e
commit 4f911db
Showing
2 changed files
with
47 additions
and
38 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,4 +1,9 @@ | ||
# MUI-Sonner | ||
|
||
This is a Monorepo for the mui-sonner project. | ||
Read more about the project in the [README](./packages/mui-sonner/README.md) of the package. | ||
# MUI-Sonner | ||
|
||
This is a Monorepo for the mui-sonner project. | ||
Check out the [demo](https://mui-sonner.tsotne.co.uk/). | ||
|
||
## Documentation | ||
|
||
Read more about the project in the [README](./packages/mui-sonner/README.md) of the package. | ||
View the official documentation [here](https://mui-sonner.tsotne.co.uk/getting-started). |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,34 +1,38 @@ | ||
[mui-sonner](https://mui-sonner.tsotne.co.uk/) is is a package that combines [sonner](https://www.npmjs.com/package/sonner) and [MUI](https://mui.com/) to achieve a simple, opinionated toast component for react. | ||
|
||
If you are not using MUI, you should use [sonner](https://www.npmjs.com/package/sonner) directly. | ||
|
||
## Features | ||
|
||
- **Avoids Context**: Like [sonner](https://www.npmjs.com/package/sonner), it doesn't use context. | ||
- **Alerts**: The toast that is actually built around using the [Alert component from MUI](https://mui.com/material-ui/react-alert/), so it's easy to customize. | ||
- **Styling**: Leverages MUI components, meaning the toast and components inside it will use your already defined MUI theme. | ||
|
||
## Usage | ||
|
||
`npm install mui-sonner` | ||
|
||
Add <Toaster /> to your app, preferably quite high in the tree. After that you can use `toast()` from anywhere in your app. | ||
|
||
```jsx | ||
import { Toaster, toast } from "mui-sonner"; | ||
|
||
// ... | ||
|
||
function App() { | ||
return ( | ||
<div> | ||
<Toaster /> | ||
<button onClick={() => toast("My first toast")}>toast please</button> | ||
</div> | ||
); | ||
} | ||
``` | ||
|
||
## Documentation | ||
|
||
Coming soon | ||
[mui-sonner](https://mui-sonner.tsotne.co.uk/) is is a package that combines [sonner](https://www.npmjs.com/package/sonner) and [MUI](https://mui.com/) to achieve a simple, opinionated toast component for react. | ||
|
||
If you are not using MUI, you should use [sonner](https://www.npmjs.com/package/sonner) directly. | ||
|
||
## Demo | ||
|
||
[View demo](https://mui-sonner.tsotne.co.uk/) | ||
|
||
## Documentation | ||
|
||
[View the documentation](https://mui-sonner.tsotne.co.uk/getting-started) | ||
|
||
## Features | ||
|
||
- **Avoids Context**: Like [sonner](https://www.npmjs.com/package/sonner), it doesn't use context. | ||
- **Alerts**: The toast that is actually built around using the [Alert component from MUI](https://mui.com/material-ui/react-alert/), so it's easy to customize. | ||
- **Styling**: Leverages MUI components, meaning the toast and components inside it will use your already defined MUI theme. | ||
|
||
## Usage | ||
|
||
`npm install mui-sonner` | ||
|
||
Add <Toaster /> to your app, preferably quite high in the tree. After that you can use `toast()` from anywhere in your app. | ||
|
||
```jsx | ||
import { Toaster, toast } from "mui-sonner"; | ||
|
||
// ... | ||
|
||
function App() { | ||
return ( | ||
<div> | ||
<Toaster /> | ||
<button onClick={() => toast("My first toast")}>toast please</button> | ||
</div> | ||
); | ||
} | ||
``` |