Download the PHP package usernotnull/tall-toasts without Composer
On this page you can find all versions of the php package usernotnull/tall-toasts. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Download usernotnull/tall-toasts
More information about usernotnull/tall-toasts
Files in usernotnull/tall-toasts
Package tall-toasts
Short Description A Toast notification library for the Laravel TALL stack. You can push notifications from the backend or frontend to render customizable toasts with almost zero footprint on the published CSS/JS!
License MIT
Homepage https://github.com/usernotnull/tall-toasts
FAQ
Example:
In general, it is recommended to use always a project to download your libraries. In an application normally there is more than one library needed.
- Some hosting areas are not accessible by a terminal or SSH. Then it is not possible to use Composer.
- To use Composer is sometimes complicated. Especially for beginners.
- Composer needs much resources. Sometimes they are not available on a simple webspace.
- If you are using private repositories you don't need to share your credentials. You can set up everything on our site and then you provide a simple download link to your team member.
- Simplify your Composer build process. Use our own command line tool to download the vendor folder as binary. This makes your build process faster and you don't need to expose your credentials for private repositories.
Informations about the package tall-toasts
Featured On
Why
If you are building a web app with the TALL stack, you must choose this library over the other outdated libraries available:
Size does matter
Since the frontend is a pure AlpineJS component with no reliance on external JS libs, and since the backend handles most of the logic, the javascript footprint is tiny (less than ONE kilobyte!) .
The CSS footprint is also negligible as it uses the default TailwindCSS classes. Even if you override the default views, you will rest assured that Tailwind's purging will only keep the styles/classes you have used.
In plain English, it will not bloat your generated JS/CSS files nor add extra files to download as when using other JS libs!
Takes advantage of all the niceties that come with TALL
You can call it from anywhere! Memorize Toast for the frontend and toast() for the backend.
See the usage section for examples.
Customizable
You have control over the view: As you are overriding the blade view, you'll be able to shape it as you like using TailwindCSS classes.
No more messing with custom CSS overrides!
Usage
From The Frontend
From The Backend
You can call the above toast helper from controllers, blade views, and components.
Support Me
I plan on developing many open-source packages using the TALL stack.
Consider supporting my work by tweeting about this library or by contributing to this package.
Check out the list of other packages I built for the TALL stack Other Packages.
To stay updated, follow me on Twitter.
Requirements
| Dependency | Version |
|---|---|
| PHP | ^8.0 |
| Laravel | ^8.0 | ^9.0 | ^10.0 | ^11.0 |
| TailwindCSS | ^2.0 | ^3.0 |
| Livewire | ^2.0 | ^3.0 (as of tall-toasts v2) |
| AlpineJS | ^3.0 |
You can find the older v1 documentation here
Installation
You can install the package via Composer:
Setup
TailwindCSS
Build your CSS as you usually do, ie
Usage With Tailwind JIT
If you are using Just-in-Time Mode, add these additional lines into
your tailwind.config.js file:
This way, Tailwind JIT will include the classes used in this library in your CSS.
As usual, if the content of tailwind.config.js changes, you should re-run the npm command.
Registering Toast with AlpineJS
Add the Toast component in your app.js:
Add <livewire:toasts /> as high as possible in the body tag, ie:
To properly dispatch toasts from inside your livewire components, add the trait:
That's it! 🎉
RTL Support
The default layout now supports RTL.
As per TailwindCSS docs on RTL support:
Always set the direction, even if left-to-right is your default.
Customization
The toasts should look pretty good out of the box. However, we've documented a couple of ways to customize the views and functionality.
Configuration
You can publish the config file with:
These are the default contents of the published config file:
Customizing views
You can publish and change all views in this package:
The published views can be found and changed in resources/views/vendor/tall-toast/.
The published files are:
includes/content.blade.php- the content view of each popup notification, fully configurableincludes/icon.blade.php- the icons of each notification typelivewire/toasts.blade.php- the parent of all toasts
Text Sanitization
The content view displays the title and message with x-html. This is fine since the backend sanitizes the title and message by default.
⚠️ If you wish to skip sanitization in order to display HTML content, such as bolding the text or adding <br> to go to
the next line, you will call doNotSanitize() as seen in the usage section. In such case, make sure no user
input is provided!
Troubleshooting
Make sure you thoroughly go through this readme first!
If the checklist below does not resolve your problem, feel free to submit an issue. Make sure to follow the bug report template. It helps us quickly reproduce the bug and resolve it.
The toasts show multiple times only after refresh
-
If you are calling toasts from a livewire component, did you add the trait WireToast to the component? (see)
- Did you swap push() and pushOnNextPage()?
The toasts won't show
-
Is the
-
Did you skip adding the ToastComponent as an alpine data component?
-
Did you forget calling push() at the end of the chained method? (see)
-
Have you tried calling the toast() helper function from another part of the application and check if it worked (it will help us scope the problem)? (see)
-
Did you try calling
php artisan view:clear? - Are you getting any console errors?
The toasts show but look weird
- Are you using TailwindCSS JIT? Don't forget to update your purge list! (see)
- You may need to rebuild your CSS by running:
npm run devor re-runningnpm run watch(see)
Other Packages
To stay updated, follow me on Twitter.
Testing
This package uses PestPHP to run its tests.
-
To run tests without coverage, run:
- To run tests with coverage, run:
Contributing
This package has 3 GitHub Workflows which run sequentially when pushing PRs:
-
First, it checks for styling issues and automatically fixes them using:
-
Then, it uses static analysis followed by standard unit tests using:
- Finally, it generates the minified JS dist which is injected by @toastScripts
When pushing PRs, it's a good idea to do a quick run and make sure the workflow checks out, which saves time during code review before merging.
To facilitate the job, you can run the below command before pushing the PR:
Please see CONTRIBUTING for details.
Changelog
Please see CHANGELOG for more information on what has changed recently.
Versioning
This project follows the Semantic Versioning guidelines.
Security Vulnerabilities
As per security best practices, do not call doNotSanitize() on a toast that has user input in its message or title!
Please review the security policy on how to report security vulnerabilities.
Credits
- John F ( @usernotnull )
- All Contributors
License
The MIT License (MIT). Please see the license file for more information.
All versions of tall-toasts with dependencies
illuminate/contracts Version ^8.15 || 9.0 - 9.34 || ^9.36 || ^10.0|^11.0
spatie/laravel-package-tools Version ^1.16
livewire/livewire Version ^v3