Overview
🍞 Flexible and customizable React toast notifications with support for positioning, custom rendering, click handlers, and duration control.
Video Demo 📺
| | Modal |
---|
| | |
Installation
yarn add @baronha/ting
or
npm i @baronha/ting
If you want to use Expo. Burnt is the solution for you.
New Architecture
cd ios && RCT_NEW_ARCH_ENABLED=1 bundle exec pod install --verbose
Older
cd ios && pod install --verbose
Usage
import { toast } from '@baronha/ting';
const options = {
title: 'Done 😎',
message: 'Successful!!',
};
toast(options);
Customize Icon
import { toast } from '@baronha/ting';
const options = {
title: "Vietnamese Gangz 😎",
message: "Anh em tao là Vietnamese Gangz",
titleColor: '#D60A2E',
icon: {
uri: require('./vietnam.png'),
size: 24,
},
};
toast(options);
import { alert } from '@baronha/ting';
const options = {
title: 'Done 😎',
message: 'Successful!!',
};
alert(options);
Options
Property | Type | Default value | Platform | Toast | Alert | Description |
---|
title | string | null | | ✅ | ✅ | |
subTitle | string | null | | ✅ | ✅ | |
titleColor | string | null | | ✅ | ✅ | |
messageColor | string | null | | ✅ | ✅ | |
icon | object | null | | ✅ | ✅ | See Icon |
preset | string | done | | ✅ | ✅ | Toast: done, error, none . Alert: done, error, none, spinner |
duration | number | 3 | | ✅ | ✅ | The lifetime of the toast (seconds) |
titleColor | string | null | | ✅ | ✅ | |
shouldDismissByDrag | boolean | true | | ✅ | | The behavior on Android is click |
position | string | top | | ✅ | | Toast is displayed from top or bottom |
haptic | string | null | | ✅ | | success, warning, error, none |
shouldDismissByTap | boolean | true | | | ✅ | |
borderRadius | number | null | | | ✅ | |
blurBackdrop | number | null | | | ✅ | |
backdropOpacity | number | null | | | ✅ | |
Icon
icon | Type | Default value | Platform |
---|
uri | string | null | |
size | number | null | |
To Do
Performance
We're trying to improve performance. If you have a better solution, please open a issue or pull request. Best regards!
Contributing
See the contributing guide to learn how to contribute to the repository and the development workflow.
License
MIT
AlertKit
SPIndicator
EasyWindow