pakenfit / toast-it

Let's toast to the health of your app 🔥

@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 and iOS (not tested on web 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 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 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