https://github.com/gstj/react-native-magic-toast
🦄 A beautiful imperative toast you can call from anywhere!
https://github.com/gstj/react-native-magic-toast
modal react-native toast
Last synced: over 1 year ago
JSON representation
🦄 A beautiful imperative toast you can call from anywhere!
- Host: GitHub
- URL: https://github.com/gstj/react-native-magic-toast
- Owner: GSTJ
- License: mit
- Created: 2022-02-22T19:24:13.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2024-06-08T19:47:39.000Z (about 2 years ago)
- Last Synced: 2024-10-29T12:57:18.312Z (over 1 year ago)
- Topics: modal, react-native, toast
- Language: TypeScript
- Homepage:
- Size: 741 KB
- Stars: 12
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# React Native Magic Toast 🦄
A beautiful Toast library that can be called imperatively from anywhere!
| IOS | Android |
| ----------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------- |
| 
| 
|
## Installation
```sh
yarn add react-native-magic-toast react-native-magic-modal react-native-safe-area-context
```
This toast uses [react-native-magic-modal](https://github.com/GSTJ/react-native-magic-modal) as a base for displaying it anywhere. [react-native-safe-area-context](https://github.com/th3rdwave/react-native-safe-area-context) is here to prevent the modal message from being underneath safe areas.
## Usage
Insert a SafeAreaProvider encapsulating your app and a MagicModalPortal right beneath it
```js
import { SafeAreaProvider } from 'react-native-safe-area-context';
import { MagicModalPortal } from 'react-native-magic-modal';
export default function App() {
return (
//
);
}
```
Then, you are free to use the magicToast as shown from anywhere you want.
```js
import { magicToast } from 'react-native-magic-toast';
// ...
magicToast.alert('Oops! Something went wrong 😬');
magicToast.success('Hurray! Saved successfully');
// You can also use the show method to render a custom toast
magicToast.show(() => (
/**
* Toast.Container is obligatory as it handles the duration, but you are free
* to customize the View as you wish. You can change the default background color,
* padding, everything! The rest of the components are optional and just help you
* to build a toast faster.
*/
My custom toast
));
```
## Contributing
See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.
## License
[MIT](LICENSE.md)
Made with 💖 by [Gabriel Taveira](https://github.com/GSTJ)