Quickstart

Get up and running with SolidNotifications in just a few simple steps.

Installation

Install the package from npm:

npm install solid-notifications
# or
yarn add solid-notifications
# or
pnpm add solid-notifications

Usage

Here's a quick example to show how easy it is to use:

1. Mount the ToastProvider and Toaster components:

Wrap your app with the ToastProvider component. Put the Toaster component anywhere in the component tree to display toasts.

import { ToastProvider, Toaster } from "solid-notifications";

export default function App(props) {
  return (
    <ToastProvider>
      <Toaster />
      {props.children}
    </ToastProvider>
  );
}

2. Import the Solid Notifications css file into your main css file:

It can also be imported directly into the main component file.

/* index.css */

@import "solid-notifications/index.css";

3. Create toasts:

Use the useToast hook to access the notify function and other toast functionality.

import { useToast } from "solid-notifications";

export default function AppContent() {
  const { notify } = useToast();

  return (
    <div>
      <button onClick={() => notify("🚀 New toast ready to serve!")}>
        Create a Toast!
      </button>
    </div>
  );
}

Or call the showToast function directly (more info in the Global API section):

   import { showToast } from "solid-notifications";

   export default function App() {
     return (
      <div>
        <button onClick={() => showToast("🚀 New toast ready to serve!")}>
          Create a Toast!
        </button>
      </div>
     );
   }