π Flexible and customizable React toast notifications with support for positioning, custom rendering, click handlers, and duration control.
## Video Demo πΊ
| ![ios] | ![android] | Modal |
| ---------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- |
| | | |
## Installation
```sh
yarn add @baronha/ting
or
npm i @baronha/ting
```
> If you want to use Expo. [Burnt](https://github.com/nandorojo/burnt) is the solution for you.
### [![iOS][iOS]][iOS-URL]
#### New Architecture
```sh
cd ios && RCT_NEW_ARCH_ENABLED=1 bundle exec pod install --verbose
```
#### Older
```sh
cd ios && pod install --verbose
```
## Usage
### ![Toast][Toast]
```js
import { toast } from '@baronha/ting';
// ...
const options = {
title: 'Done π',
message: 'Successful!!',
};
toast(options); // easy to use
```
#### Customize Icon
```js
import { toast } from '@baronha/ting';
// ...
const options = {
// ...
title: 'Vietnamese Gangz π',
message: 'Anh em tao lΓ Vietnamese Gangz',
titleColor: '#D60A2E',
icon: {
uri: require('./vietnam.png'), // or remote
size: 24,
},
};
toast(options); // icon is π»π³
```
### ![Alert][Alert]
```js
import { alert } from '@baronha/ting';
// ...
const options = {
title: 'Done π',
message: 'Successful!!',
};
alert(options); // easy to use
```
### Initialization
Instead of using too many options like this:
```js
const options = {
// ...
messageColor: '#D60A2E',
titleColor: '#D60A2E',
icon: {
uri: require('./vietnam.png'), // or remote
size: 24,
},
shouldDismissByTap: true,
position: 'bottom',
// ... bla bla bla
};
toast(options);
```
You want to initialize the default options for all subsequent use of toast or alert. You can use the setup function that is called when the application is initialized. Do the following:
```js
import { setup } from '@baronha/ting';
const initOption = {
toast: {
messageColor: '#D60A2E',
titleColor: '#D60A2E',
backgroundColor: '#ffffff',
// ... more and more
},
alert: {
// ... alert's option
},
};
setup(initOption);
// Use it next time. You can completely override it on subsequent calls
toast({
title: 'Ting!',
message: 'Easy toast for React Native',
});
alert({
title: "What's up bruhhh!",
message: 'Easy Alert for React Native',
});
```
## Options
| Property | Type | Default value | Platform | Toast | Alert | Description |
| --------------------- | :------: | :-----------: | :--------: | :---: | :---: | :------------------------------------------------------------------------------------------ |
| `title` | string | null | ![Both] | β
| β
| |
| `message` | string | null | ![Both] | β
| β
| |
| `titleColor` | string | null | ![Both] | β
| β
| The color of the title text in hexadecimal format (e.g., #FF0000) |
| `messageColor` | string | null | ![Both] | β
| β
| The color of the message text in hexadecimal format (e.g., #00FF00) |
| `icon` | `object` | null | ![Both] | β
| β
| See [Icon](###Icon) |
| `preset` | string | `done` | ![Both] | β
| β
| `done, error, none, spinner` |
| `duration` | number | `3` | ![Both] | β
| β
| The lifetime of the toast (seconds) |
| `titleColor` | string | null | ![Both] | β
| β
| |
| `shouldDismissByDrag` | boolean | true | ![Both] | β
|
| `position` | string | `top` | ![Both] | β
| | **Toast** is displayed from `top` or `bottom` |
| `haptic` | string | null | ![iOS] | β
| | `success, warning, error, none` |
| `shouldDismissByTap` | boolean | true | ![Both] | | β
| |
| `borderRadius` | number | null | ![Both] | | β
| |
| `blurBackdrop` | number | null | ![Android] | | β
| |
| `backdropOpacity` | number | null | ![Android] | | β
| |
| `backgroundColor` | string | #ffffff | ![Both] | β
| β
| The background color of the toast in hexadecimal format (e.g., #0000FF)
Ryam |
BαΊ£o HΓ . |
Dion Grendelman |
Huckleberry |
Nick - Ngoc Pham |