### Getting Started with Solid Toast in SolidJS

Source: https://github.com/ardeora/solid-toast/blob/main/README.md

This snippet demonstrates the basic setup for using solid-toast. It shows how to import the `toast` function and `Toaster` component, place the `Toaster` in the component tree, and trigger a toast using the `toast` function on a button click.

```jsx
import toast, { Toaster } from 'solid-toast';

const notify = () => toast('Here is your toast.');

const App = () => {
  return (
    <div>
      <button onClick={notify}>Make me a toast</button>
      <Toaster />
    </div>
  );
};
```

--------------------------------

### Installing Solid Toast with Yarn

Source: https://github.com/ardeora/solid-toast/blob/main/README.md

This command installs the solid-toast package as a dependency in your project using the Yarn package manager.

```sh
yarn add solid-toast
```

--------------------------------

### Installing Solid Toast with NPM

Source: https://github.com/ardeora/solid-toast/blob/main/README.md

This command installs the solid-toast package as a dependency in your project using the NPM package manager.

```sh
npm install solid-toast
```

--------------------------------

### Calling toast Function with Options

Source: https://github.com/ardeora/solid-toast/blob/main/README.md

This example shows how to call the `toast()` function with a second argument containing `ToastOptions`. These options allow customization of duration, position, styling, icon, accessibility properties, and more for an individual toast.

```js
toast('This is a simple toast!', {
  duration: 5000,
  position: 'top-right',
  // Add a delay before the toast is removed
  // This can be used to time the toast exit animation
  unmountDelay: 500,
  // Styling - Supports CSS Objects, classes, and inline styles
  // Will be applied to the toast container
  style: {
    'background-color': '#f00',
  },
  className: 'my-custom-class',
  // Custom Icon - Supports text as well as JSX Elements
  icon: '🍩',
  // Set accent colors for default icons that ship with Solid Toast
  iconTheme: {
    primary: '#fff',
    secondary: '#000',
  },
  // Aria Props - Supports all ARIA props
  aria: {
    role: 'status',
    'aria-live': 'polite',
  },
});
```

--------------------------------

### Creating an Advanced Custom Toast with Lifecycle Access

Source: https://github.com/ardeora/solid-toast/blob/main/README.md

This example demonstrates passing a function to `toast.custom()`. The function receives the toast object as an argument, allowing access to properties like `visible` and the toast `id` for advanced interactions, such as programmatically dismissing the toast from within its content.

```jsx
toast.custom(
  (t) => (
    <div>
      <h1>Custom Toast</h1>
      <p>This is a custom toast!</p>
      <p>{t.visible ? 'Showing' : 'I will close in 1 second'}</p>
      <button onClick={() => toast.dismiss(t.id)}>Close Toast</button>
    </div>
  ),
  {
    unmountDelay: 1000,
  }
);
```

--------------------------------

### Creating a Loading Toast

Source: https://github.com/ardeora/solid-toast/blob/main/README.md

This method displays a toast with a loading indicator icon. It's typically used for asynchronous operations and can later be updated to show success or error status.

```js
toast.loading('Loading Photos...');
```

--------------------------------

### Configuring the Toaster Component

Source: https://github.com/ardeora/solid-toast/blob/main/README.md

This snippet shows the available props for the `Toaster` component. These options set default configurations for all toasts rendered by this instance of the `Toaster`, including position, spacing, container styling, and default toast options that can be overridden by individual toast calls.

```jsx
<Toaster
  position="top-center"
  // Spacing between each toast in pixels
  gutter={8}
  containerClassName=""
  containerStyle={{}}
  toastOptions={{
    // Define default options that each toast will inherit. Will be overwritten by individual toast options
    className: '',
    duration: 5000,
    style: {
      background: '#363636',
      color: '#fff',
    },
  }}
/>
```

--------------------------------

### Creating a Success Toast

Source: https://github.com/ardeora/solid-toast/blob/main/README.md

This method creates a toast specifically for success notifications. It includes an animated checkmark icon by default, which can be themed using the `iconTheme` option.

```js
toast.success('Successfully saved!');
```

--------------------------------

### Creating a Simple Custom Toast with JSX

Source: https://github.com/ardeora/solid-toast/blob/main/README.md

This method allows complete customization of the toast's appearance by passing a SolidJS JSX Element directly as the toast content.

```jsx
toast.custom(() => (
  <div>
    <h1>Custom Toast</h1>
    <p>This is a custom toast!</p>
  </div>
));
```

--------------------------------

### Creating a Blank Toast

Source: https://github.com/ardeora/solid-toast/blob/main/README.md

This is the simplest way to create a toast. A blank toast displays only the provided message without any default icon. A custom icon can be added via the options.

```js
toast('This is a blank toast!');
```

--------------------------------

### Creating a Toast from a Promise

Source: https://github.com/ardeora/solid-toast/blob/main/README.md

This function handles the lifecycle of a promise, showing a loading toast while the promise is pending, and automatically updating to success or error based on the promise's outcome. It takes the promise and an options object defining the text/JSX for loading, success, and error states.

```jsx
const myPromise = fetchData();

toast.promise(myPromise, {
  loading: 'Loading',
  success: <b>Got the data</b>,
  error: 'An error occurred 😔',
});
```

--------------------------------

### Creating an Error Toast

Source: https://github.com/ardeora/solid-toast/blob/main/README.md

This method creates a toast for error notifications. It includes an animated error icon by default, which can be themed using the `iconTheme` option.

```js
toast.error('Something went wrong!');
```

--------------------------------

### Updating an Existing Toast

Source: https://github.com/ardeora/solid-toast/blob/main/README.md

To update the content or options of an existing toast, call any of the `toast` methods (like `toast.success`, `toast.error`, `toast`, etc.) and pass the unique `id` of the toast to be updated within the options object.

```js
const toastId = toast.loading('Loading...');
// ...
toast.success('This worked', {
  id: toastId,
});
```

--------------------------------

### Dismissing All Toasts Programmatically

Source: https://github.com/ardeora/solid-toast/blob/main/README.md

Calling `toast.dismiss()` without any arguments triggers the exit animation for all currently visible toasts, initiating their removal after the `unmountDelay` duration.

```js
toast.dismiss();
```

--------------------------------

### Dismissing a Single Toast Programmatically

Source: https://github.com/ardeora/solid-toast/blob/main/README.md

This utility function triggers the exit animation for a specific toast identified by its unique `toastId`, initiating its removal after the `unmountDelay` duration.

```js
const toastId = toast.loading('Loading...');
// ...
toast.dismiss(toastId);
```

--------------------------------

### Removing All Toasts Instantly

Source: https://github.com/ardeora/solid-toast/blob/main/README.md

Calling `toast.remove()` without any arguments instantly removes all currently visible toasts without triggering their exit animations.

```js
toast.remove();
```

--------------------------------

### Removing a Single Toast Instantly

Source: https://github.com/ardeora/solid-toast/blob/main/README.md

This utility function instantly removes a specific toast identified by its unique `toastId` without triggering the exit animation.

```js
toast.remove(toastId);
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.