React component kitchen with toaster popping up localized notifications

Toasty Local Notifications: Spice Up Your React App with react-local-toast

The Gray Cat
The Gray Cat

React Local Toast brings a fresh approach to notifications in React applications. Unlike traditional toast notifications that appear in fixed corners of the screen, this library allows you to attach toasts directly to specific components. This targeted approach enhances user experience by providing context-specific feedback right where the user’s attention is focused.

Zesty Features to Savor

  • Component-Specific Toasts: Attach notifications directly to DOM elements for contextual feedback.
  • Flexible Positioning: Display toasts on any side of the target component - top, bottom, left, or right.
  • Multiple Toast Support: Stack multiple notifications on a single component.
  • Pre-baked Varieties: Out-of-the-box support for info, success, warning, error, and loading toasts.
  • Customization Galore: Bring your own designs or even implement a custom toast component.
  • Accessibility Baked In: WAI-ARIA support ensures your notifications are inclusive.
  • TypeScript Sprinkles: Full TypeScript support for a type-safe development experience.

Preparing the Kitchen

Let’s start by adding React Local Toast to your project. You can use either npm or yarn:

npm install react-local-toast --save

# Or if you prefer yarn
yarn add react-local-toast

Serving the First Toast

Setting the Table

First, we need to add the styles to your project. In most cases, you can simply import them at the top of your main component file:

import 'react-local-toast/dist/bundle.css';

Next, wrap your main application component with the LocalToastProvider:

import React from 'react';
import { LocalToastProvider } from 'react-local-toast';

const App = () => {
  return (
    <LocalToastProvider>
      {/* Your app components go here */}
    </LocalToastProvider>
  );
};

export default App;

This provider sets up the context necessary for the toasts to function throughout your application.

Toasting Your First Component

Now, let’s create a component that will display a toast. We’ll use the LocalToastTarget to mark where we want our toasts to appear:

import React from 'react';
import { LocalToastTarget, useLocalToast } from 'react-local-toast';

const ToastyButton = () => {
  const { showToast } = useLocalToast();

  const handleClick = () => {
    showToast('my-button', 'Toasty notification!');
  };

  return (
    <LocalToastTarget name="my-button">
      <button onClick={handleClick}>Click for Toast</button>
    </LocalToastTarget>
  );
};

export default ToastyButton;

In this example, we’ve created a button that, when clicked, will display a toast notification right next to it. The useLocalToast hook provides the showToast function, which we use to trigger the notification.

Explaining the Recipe

The LocalToastTarget component wraps the element we want to attach toasts to. The name prop is crucial - it’s the identifier we use when calling showToast.

The showToast function takes two main arguments:

  1. The name of the target (matching the LocalToastTarget name)
  2. The message to display

When the button is clicked, a toast will appear next to it with the message “Toasty notification!“.

Advanced Toasting Techniques

Flavoring Your Toasts

React Local Toast offers different types of toasts to match various scenarios:

import { useLocalToast } from 'react-local-toast';

const AdvancedToasts = () => {
  const { showToast } = useLocalToast();

  const showSuccessToast = () => {
    showToast('target-name', 'Operation successful!', { type: 'success' });
  };

  const showErrorToast = () => {
    showToast('target-name', 'Oops! Something went wrong.', { type: 'error' });
  };

  // ... rest of the component
};

The third argument to showToast is an options object where you can specify the type of toast. Available types include ‘info’, ‘success’, ‘warning’, ‘error’, and ‘loading’.

Customizing the Toast Recipe

You can further customize your toasts by passing additional options:

showToast('target-name', 'Custom toast', {
  type: 'info',
  position: 'top',
  duration: 5000,
  closeOnClick: true,
  className: 'my-custom-toast',
});

This creates an info toast that appears above the target, lasts for 5 seconds, closes when clicked, and has a custom CSS class for styling.

Baking Toasts for Class Components

If you’re working with class components, React Local Toast provides a higher-order component to add toast functionality:

import React from 'react';
import { LocalToastTarget, withLocalToast, LocalToastHocProps } from 'react-local-toast';

interface Props extends LocalToastHocProps {
  name: string;
}

class ClassyToast extends React.Component<Props> {
  showToast = () => {
    this.props.showToast('classy-toast', `Hello, ${this.props.name}!`);
  };

  render() {
    return (
      <LocalToastTarget name="classy-toast">
        <button onClick={this.showToast}>Classy Toast</button>
      </LocalToastTarget>
    );
  }
}

export default withLocalToast(ClassyToast);

The withLocalToast HOC injects the same toast functions as the useLocalToast hook, making them available via props.

Conclusion

React Local Toast offers a unique and powerful way to enhance your React application’s user interface. By allowing you to attach notifications directly to components, it provides a more intuitive and context-aware user experience. Whether you’re building a complex dashboard or a simple form, this library’s flexibility and ease of use make it an excellent choice for implementing localized notifications.

As you explore the possibilities of React Local Toast, you might also be interested in other React libraries that can further enhance your UI:

Remember to explore the library’s documentation for even more advanced features and customization options. With React Local Toast, you’re well-equipped to create informative, attractive, and user-friendly notifications that will make your React app truly stand out.