https://github.com/pakenfit/toast-it
Let's toast to the health of your app 🔥
https://github.com/pakenfit/toast-it
expo react-native react-native-reanimated toast toast-notifications
Last synced: about 2 months ago
JSON representation
Let's toast to the health of your app 🔥
- Host: GitHub
- URL: https://github.com/pakenfit/toast-it
- Owner: pakenfit
- License: mit
- Created: 2023-06-24T14:24:08.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2023-09-30T13:32:02.000Z (almost 3 years ago)
- Last Synced: 2024-08-09T12:28:38.149Z (almost 2 years ago)
- Topics: expo, react-native, react-native-reanimated, toast, toast-notifications
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/@pakenfit/toast-it
- Size: 5.26 MB
- Stars: 1
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# @pakenfit/toast-it
Let's toast to the health of your application
With animation type spring and backdrop for loading
## Installation
```sh
npm install @pakenfit/toast-it --save
```
Or
```sh
yarn add @pakenfit/toast-it
```
#### Dependencies
This library needs these dependencies to be installed in your project before you can use it:
```sh
npm install react-native-gesture-handler react-native-reanimated react-native-safe-area-context react-native-svg --save
```
Or
```sh
yarn add react-native-gesture-handler react-native-reanimated react-native-safe-area-context react-native-svg
```
## Features
- Fully customizable
- Works on `Android` and `iOS` (not tested on `web` should work as well)
- Compatible with Expo Go
- Written in Typescript
## Usage
```js
import { ToastProvider, useToast } from '@pakenfit/toast-it';
const ToastComponent = () => {
const { show, hide } = useToast();
return (
show({
type: 'success',
message: 'This is a success Toast🤙🏽',
})
}
/>
)
}
export default function App() {
return (
)
}
```
## Configuration
The toast component accepts the following configuration options:
- `type (optional)`: The type of the toast message. Possible values are `'success'`, `'error'`, `'warning'`, `'info'`, or `'loading'`. Default is `'info'`.
- `message`: The text message to be displayed in the toast.
- `duration (optional)`: The duration of the toast message in milliseconds. Use `'infinite'` for an indefinite duration. Default is `3000` milliseconds.
- `textColor (optional)`: The text color of the toast message. Default is `black`.
- `iconColor (optional)`: The color of the toast icon. Default is undefined (uses default color for each type).
- `iconSize (optional)`: The size of the toast icon. Default is undefined (uses default size for each type).
- `textNumberOfLines (optional)`: The number of lines to display for the toast message. Default is `1`.
- `withBackdrop (optional, only for type loading)`: If true a backdrop is set when loading. Default is `false`.
- `backdropColor (optional, only for type loading)`: Set the backdrop color.
- `backdropOpacity (optional, only for type loading)`: Set the backdrop opacity.
- `animationType (optional)`: The toast enter animation type. Possible values are `'timing'` and `'spring'`. Default is `'timing'`.
- `containerStyle (optional)`: The toast container style.
## API
The Toast component provides the following methods through the toastRef:
- `show(config: ToastConfig)`: Displays a toast message with the specified configuration.
- `hide()`: Hides the currently displayed toast message.
- `isVisible()`: Returns a boolean indicating whether a toast message is currently visible.
## Types
### ToastRef
The `ToastRef` type represents the reference to the Toast component, allowing access to its methods. It has the following methods:
- `show`: Shows the toast with the specified configuration.
- `hide`: Hides the toast.
- `isVisible`: Returns a boolean indicating whether the toast is currently visible.
### ToastConfig
The `ToastConfig` type represents the configuration options for the toast component. It has the following properties:
```
type ToastConfig = {
type?: toastType;
message: string;
duration?: number | 'infinite';
textColor?: string;
iconColor?: string;
iconSize?: number;
textNumberOfLines?: number;
withBackdrop?: boolean;
backdropColor?: string;
backdropOpacity?: number;
animationType?: 'timing' | 'spring',
containerStyle?: ViewStyle
}
```
## Contributing
See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.
## Development
You can launch the example app to test your feature or bug:
```sh
yarn example ios
or
yarn example android
```
Run tests
```
yarn test
```
## License
MIT
---
Made with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)
Inspired by [react-hot-toast](https://github.com/timolins/react-hot-toast)