Noty | PHPFlasher

If you find PHPFlasher useful, please consider giving it a ⭐ star on GitHub 😊. If you spot any typos or have suggestions, feel free to contribute to the documentation 📝. Your feedback helps keep the project up-to-date and well-maintained. Thank you

Laravel

Installation

composer require php-flasher/flasher-noty-laravel

After installation, you need to run another command to set up the necessary assets for PHPFlasher:

php artisan flasher:install

Configuration

Note: The configuration settings below are the default ones. You only need to change them if you want to customize the default behavior.

<?php // config/flasher.php

return [
    'plugins' => [
        'noty' => [
            'scripts' => [
                '/vendor/flasher/noty.min.js',
                '/vendor/flasher/flasher-noty.min.js'
            ],
            'styles' => [
                '/vendor/flasher/noty.css',
                '/vendor/flasher/mint.css'
            ],
            'options' => [
                // Optional: Add global options here
                // 'layout' => 'topRight'
            ],
        ],
    ],
];

Symfony

Installation

composer require php-flasher/flasher-noty-symfony

After installation, you need to run another command to set up the necessary assets for PHPFlasher:

php bin/console flasher:install

Configuration

Note: The configuration settings below are the default ones. You only need to change them if you want to customize the default behavior.

# config/packages/flasher.yaml

flasher:
    plugins:
        noty:
            scripts:
                - '/vendor/flasher/noty.min.js'
                - '/vendor/flasher/flasher-noty.min.js'
            styles:
                - '/vendor/flasher/noty.css'
                - '/vendor/flasher/mint.css'
            options:
            # Optional: Add global options here
            #    layout: topRight

Usage

The methods described in the Usage section can also be used with the notyf adapter.

To display a notification message, you can either use the noty() helper method or obtain an instance of noty 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

#/ noty

use Flasher\Noty\Prime\NotyInterface;

class BookController
{
    public function saveBook()
    {        
        noty()->success('Your review has been submitted.');
        
        // or simply 
        
        noty('Your review has been submitted.');
    }
    
    /**
     * if you prefer to use dependency injection 
     */
    public function register(NotyInterface $noty)
    {
        // ...

        $noty->success('Your account has been unlocked.');

        // ... redirect or render the view
    }
}

info

#/ usage info

noty()->info('Your reservation has been confirmed and a confirmation email has been sent.');

warning

#/ usage warning

noty()->warning('Your account may not have been reinstated.');

error

#/ usage error

noty()->error('There was a problem restoring your account.');

For more information on Noty options and usage, please refer to the original documentation at https://ned.im/noty/

The methods described in the Usage section can also be used with the notyf adapter.

layout

top, topLeft, topCenter, topRight, center, centerLeft, centerRight, bottom, bottomLeft, bottomCenter, bottomRight

ClassName generator uses this value → noty_layout__${layout}

noty()->layout(string $layout);

#/ noty layout

noty()
    ->layout('topCenter')
    ->info('Your feedback has been submitted and is being reviewed.');

theme

Possible values: relax, mint, metroui, light, sunset, nest.

ClassName generator uses this value → noty_theme__${theme}

noty()->theme(string $theme);

Default Theme: mint

Examples:

#/ noty theme mint

noty()
    ->theme('mint')
    ->success('Your order has been placed.');

noty()
    ->theme('mint')
    ->error('There was an issue un-linking your account.');

noty()
    ->theme('mint')
    ->warning('Your account may not have been re-activated.');

noty()
    ->theme('mint')
    ->info('Your question has been submitted and is being reviewed.');

#/ noty theme relax

// don't the load the theme css file: https://github.com/needim/noty/blob/master/lib/themes/relax.css

noty()
    ->theme('relax')
    ->success('Your contact has been removed.');

noty()
    ->theme('relax')
    ->error('There was a problem reactivating your account.');

noty()
    ->theme('relax')
    ->warning('Your message may not have been received.');

noty()
    ->theme('relax')
    ->info('Your order has been placed and is being processed.');

#/ noty theme metroui

// Theme: https://github.com/needim/noty/blob/master/lib/themes/metroui.css

noty()
    ->theme('metroui')
    ->success('Your account has been restored.');

noty()
    ->theme('metroui')
    ->error('There was an issue restoring your account.');

noty()
    ->theme('metroui')
    ->warning('Your donation may not have been received.');

noty()
    ->theme('metroui')
    ->info('Heads up: This may take a while.');

#/ noty theme light

// Theme: https://github.com/needim/noty/blob/master/lib/themes/light.css

noty()
    ->theme('light')
    ->success('Your address has been updated.');

noty()
    ->theme('light')
    ->error('There was an issue re-verifying your account.');

noty()
    ->theme('light')
    ->warning('Your account may not have been re-verified.');

noty()
    ->theme('light')
    ->info('Your account has been locked and a confirmation email has been sent.');

#/ noty theme sunset
// Theme: https://github.com/needim/noty/blob/master/lib/themes/sunset.css

noty()
    ->theme('sunset')
    ->success('Your password has been changed.');

noty()
    ->theme('sunset')
    ->error('There was a problem shipping your order.');

noty()
    ->theme('sunset')
    ->warning('Your report may not have been generated.');

noty()
    ->theme('sunset')
    ->info('Your account has been linked and a confirmation email has been sent.');

timeout

false, 1000, 3000, 3500, etc. Delay for closing event in milliseconds (ms). Set false for sticky notifications.

noty()->timeout(int|bool $timeout)

#/ noty timeout

noty()
    ->timeout(2000) // 2 seconds
    ->warning('Your account may not have been re-verified.');

progressBar

true, false - Displays a progress bar if timeout is not false.

noty()->progressBar(bool $progressBar = false)

#/ noty progressBar

noty()
    ->progressBar(false)
    ->success('Your contact has been removed.');

closeWith

click, button

Default click

noty()->closeWith(string|array $closeWith)

#/ noty closeWith

noty()
    ->closeWith(['click', 'button'])
    ->error('There was a problem updating your profile.');

animation

If string, assumed to be CSS class name.
If null, no animation at all.
If function, runs the function. (v3.0.1+)

You can use animate.css class names or your custom css animations as well.

noty()->animation(string $animation, string $effect)

#/ noty animation

noty()
    ->animation(null)
    ->success('Your account has been deactivated.');

sounds

sources : Array of audio sources e.g ‘some.wav’
volume : nteger value between 0-1 e.g 0.5
conditions : There are two conditions for now: ‘docVisible’ & ‘docHidden’. You can use one of them or both.

noty()->sounds(string $option, mixed $value)

#/ noty sounds

noty()
    ->sounds('sources', ['/static/sounds/notification.wav'])
    ->sounds('volume', 0.3)
    ->sounds('conditions', ['docVisible', 'docHidden'])
    ->success('Your account has been re-activated.');

docTitle

There are two conditions for now: docVisible & docHidden. You can use one of them or both.

noty()->docTitle(string $option, mixed $docTitle)

#/ noty docTitle

noty()
    ->docTitle('conditions', ['docVisible', 'docHidden'])
    ->warning('Your product may not have been shipped.');

noty()->modal(bool $modal = true)

#/ noty modal

noty()
    ->modal(true)
    ->warning('Your email may not have been verified.');

You can use this id with querySelectors.
Generated automatically if false.

noty()->id(bool|string $id)

#/ noty id

noty()
    ->id(false)
    ->error('There was a problem registering your device.');

force

DOM insert method depends on this parameter.
If false uses append, if true uses prepend.

noty()->force(bool $force = true)

#/ noty force

noty()
    ->force(false)
    ->warning('Your subscription may not have been activated.');

queue

NEW Named queue system. Details are here.

noty()->queue(string $queue)

Default: global

#/ noty queue

noty()
    ->queue('global')
    ->error('There was a problem re-activating your account.');

killer

If true closes all visible notifications and shows itself.
If string(queueName) closes all visible notification on this queue and shows itself.

noty()->killer(bool|string $killer)

#/ noty killer

noty()
    ->killer(true)
    ->info('Your account has been unlocked and a confirmation email has been sent.');

container

Custom container selector string. Like .my-custom-container.
Layout parameter will be ignored.

noty()->container(bool|string $container)

#/ noty container

noty()
    ->container(false)
    ->error('Error!');

visibilityControl

If true Noty uses PageVisibility API to handle timeout.
To ensure that users do not miss their notifications.

noty()->visibilityControl(bool $visibilityControl)

#/ noty visibilityControl

noty()
    ->visibilityControl(true)
    ->info('Your file has been uploaded and is being processed.');