---
permalink: /library/notyf/
title: Notyf
description: Add lightweight, customizable notification messages to your web projects with Notyf, a popular JavaScript library. With a focus on simplicity and accessibility, Notyf is easy to install and use, making it a great choice for any project that wants to engage and inform users.
handler: notyf
data-controller: notyf
---
## Laravel
Installation
```shell
composer require php-flasher/flasher-notyf-laravel
```
After installation, you need to run another command to set up the necessary assets for PHPFlasher:
```shell
php artisan flasher:install
```
Configuration
```php
[
'notyf' => [
'scripts' => [
'/vendor/flasher/flasher-notyf.min.js',
],
'styles' => [
'/vendor/flasher/flasher-notyf.min.css',
],
'options' => [
// Optional: Add global options here
'dismissible' => true,
],
],
],
];
```
## Symfony
Installation
```shell
composer require php-flasher/flasher-notyf-symfony
```
After installation, you need to run another command to set up the necessary assets for PHPFlasher:
```shell
php bin/console flasher:install
```
Configuration
```yaml
# config/packages/flasher.yaml
flasher:
plugins:
notyf:
scripts:
- '/vendor/flasher/flasher-notyf.min.js'
styles:
- '/vendor/flasher/flasher-notyf.min.css'
options:
# Optional: Add global options here
dismissible: true
```
---
## Usage
---
> The methods described in the **[Usage](/installation/#-usage)** section can also be used with the `notyf` adapter.
---
To display a notification message, you can either use the `notyf()` helper method or obtain an instance of `notyf` from the service container.
Then, before returning a view or redirecting, call the `success()` method and pass in the desired message to be displayed.
success
{% assign id = '#/ noty' %}
{% assign type = 'success' %}
{% assign message = site.data.messages[type] | sample %}
{% assign options = '{}' %}
{% include example.html %}
```php
{{ id }}
use Flasher\Notyf\Prime\NotyfInterface;
class BookController
{
public function saveBook()
{
notyf()->success('{{ message }}');
// or simply
notyf('{{ message }}');
}
/**
* if you prefer to use dependency injection
*/
public function register(NotyfInterface $notyf)
{
// ...
$notyf->success('{{ site.data.messages["success"] | sample }}');
// ... redirect or render the view
}
}
```
info
{% assign id = '#/ usage info' %}
{% assign type = 'info' %}
{% assign message = site.data.messages[type] | sample %}
{% assign options = '{}' %}
{% include example.html %}
```php
{{ id }}
notyf()->{{ type }}('{{ message }}');
```
warning
{% assign id = '#/ usage warning' %}
{% assign type = 'warning' %}
{% assign message = site.data.messages[type] | sample %}
{% assign options = '{}' %}
{% include example.html %}
```php
{{ id }}
notyf()->{{ type }}('{{ message }}');
```
error
{% assign id = '#/ usage error' %}
{% assign type = 'error' %}
{% assign message = site.data.messages[type] | sample %}
{% assign options = '{}' %}
{% include example.html %}
```php
{{ id }}
notyf()->{{ type }}('{{ message }}');
```
---
For more information on Notyf options and usage, please refer to the original documentation at [https://github.com/caroso1222/notyf](https://github.com/caroso1222/notyf)
---
> The methods described in the **[Usage](/installation/#-usage)** section can also be used with the `notyf` adapter.
---
position
Viewport location where notifications are rendered
position x ⇒ `left`, `center`, `right`
position y ⇒ `top`, `center`, `bottom`
Default ⇒ x: `right`, y: `bottom`
```php
notyf()->position(string $position, string $value);
```
{% assign id = '#/ notyf position' %}
{% assign type = site.data.messages.types | sample %}
{% assign message = site.data.messages[type] | sample %}
{% assign options = '{"position": {"x": "center", "y":"top"}}' %}
{% include example.html %}
```php
{{ id }}
notyf()
->position('x', 'center')
->position('y', 'top')
->{{ type }}('{{ message }}');
```
---
duration
Number of milliseconds before hiding the notification. Use 0 for infinite duration.
```php
notyf()->duration(int $duration);
```
{% assign id = '#/ notyf duration' %}
{% assign type = site.data.messages.types | sample %}
{% assign message = site.data.messages[type] | sample %}
{% assign options = '{"duration": 2000}' %}
{% include example.html %}
```php
{{ id }}
notyf()
->duration(2000) // 2 seconds
->{{ type }}('{{ message }}');
```
---
ripple
Whether to show the notification with a ripple effect
Default ⇒ `true`
```php
notyf()->ripple(bool $ripple);
```
{% assign id = '#/ notyf ripple true' %}
{% assign type = site.data.messages.types | sample %}
{% assign message = site.data.messages[type] | sample %}
{% assign options = '{"ripple": true}' %}
{% include example.html %}
```php
{{ id }}
notyf()
->ripple(true)
->{{ type }}('{{ message }}');
```
{% assign id = '#/ notyf ripple false' %}
{% assign options = '{"ripple": false}' %}
{% include example.html %}
```php
{{ id }}
notyf()
->ripple(false)
->{{ type }}('{{ message }}');
```
---
dismissible
Whether to allow users to dismiss the notification with a button
Default ⇒ `false`
```php
notyf()->dismissible(bool $dismissible);
```
{% assign id = '#/ notyf dismissible' %}
{% assign type = site.data.messages.types | sample %}
{% assign message = site.data.messages[type] | sample %}
{% assign options = '{"dismissible": true}' %}
{% include example.html %}
```php
{{ id }}
notyf()
->dismissible(true)
->{{ type }}('{{ message }}');
```