@pakenfit/toast-it
Let's toast to the health of your application
With animation type spring and backdrop for loading
Installation
npm install @pakenfit/toast-it --save
Or
yarn add @pakenfit/toast-it
Dependencies
This library needs these dependencies to be installed in your project before you can use it:
npm install react-native-gesture-handler react-native-reanimated react-native-safe-area-context react-native-svg --save
Or
yarn add react-native-gesture-handler react-native-reanimated react-native-safe-area-context react-native-svg
Features
- Fully customizable
- Works on
Android
andiOS
(not tested onweb
should work as well) - Compatible with Expo Go
- Written in Typescript
Usage
import { ToastProvider, useToast } from '@pakenfit/toast-it';
const ToastComponent = () => {
const { show, hide } = useToast();
return (
<View>
<Button
label='Show Toast'
onPress={() =>
show({
type: 'success',
message: 'This is a success Toast🤙🏽',
})
}
/>
</View>
)
}
export default function App() {
return (
<SafeAreaProvider>
<ToastProvider
defaultConfig={{
textNumberOfLines: 2,
bgColor: 'white',
textColor: 'black',
}}
/>
<ToastComponent/>
</SafeAreaProvider>
)
}
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 is3000
milliseconds. -
textColor (optional)
: The text color of the toast message. Default isblack
. -
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 is1
. -
withBackdrop (optional, only for type loading)
: If true a backdrop is set when loading. Default isfalse
. -
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 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:
yarn example ios
or
yarn example android
Run tests
yarn test
License
MIT
Made with create-react-native-library
Inspired by react-hot-toast