Skip to content

Commit 106e3e3

Browse files
limontelimonte
committed
feat: add Laravel integration
1 parent 804e385 commit 106e3e3

9 files changed

Lines changed: 420 additions & 297 deletions

File tree

‎.github/workflows/build.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,5 +33,5 @@ jobs:
3333
- name: Check for broken links
3434
uses: lycheeverse/lychee-action@v2
3535
with:
36-
args: src/**/*.tsx --exclude https://codepen.io/pen/define --exclude https://war.ukraine.ua/support-ukraine/ --exclude https://www.minisexdoll.com/anime-sexdoll/ --exclude https://www.mymasturbators.com/ --exclude https://github.com/sweetalert2/sweetalert2/commits/main --exclude https://www.cheapestsexdolls.com/ --exclude https://sextoycollective.com/ --exclude https://realspyapps.com/ --exclude https://celltrackingapps.com/
36+
args: src/**/*.tsx --exclude https://codepen.io/pen/define --exclude https://war.ukraine.ua/support-ukraine/ --exclude https://www.minisexdoll.com/anime-sexdoll/ --exclude https://www.mymasturbators.com/ --exclude https://github.com/sweetalert2/sweetalert2/commits/main --exclude https://www.cheapestsexdolls.com/ --exclude https://sextoycollective.com/ --exclude https://realspyapps.com/ --exclude https://celltrackingapps.com/ --exclude https://www.pidoll.com/
3737
fail: true

‎public/images/laravel.svg‎

Lines changed: 8 additions & 0 deletions
Loading

‎recipe-gallery/index.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,9 @@ function Recipe() {
6161
<li>
6262
<a href="./sidebars-drawers.html">Sidebars and Drawers (Left, Right, Top, Bottom)</a>
6363
</li>
64+
<li>
65+
<a href="./sweetalert2-laravel.html">Laravel Example</a>
66+
</li>
6467
</ul>
6568
</>
6669
)

‎recipe-gallery/sweetalert2-laravel.html‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<load ="partials/head.html" title="SweetAlert2 + Laravel example" />
4+
<body>
5+
<div id="root"></div>
6+
<script type="module" src="./sweetalert2-laravel.tsx"></script>
7+
</body>
8+
</html>

‎recipe-gallery/sweetalert2-laravel.tsx‎

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
import ReactDOM from 'react-dom/client'
2+
import { Nav } from '../src/components'
3+
import { CodeExample } from '../src/components/CodeExample'
4+
5+
function Recipe() {
6+
return (
7+
<>
8+
<Nav recipeGallery />
9+
<h1>SweetAlert2 + Laravel example</h1>
10+
<p>
11+
Here's the official Laravel integration:{' '}
12+
<a href="https://github.com/sweetalert2/sweetalert2-laravel">
13+
https://github.com/sweetalert2/sweetalert2-laravel
14+
</a>
15+
</p>
16+
<p>
17+
It allow you to use SweetAlert2 in your Laravel application with ease. API options are the same as in the
18+
original plugin.
19+
</p>
20+
21+
<pre style={{ maxWidth: '500px' }}>
22+
<code>
23+
<span className="unselectable">$ </span>composer require sweetalert2/laravel
24+
</code>
25+
</pre>
26+
27+
<p>
28+
Include the SweetAlert2 template in your layout file (usually{' '}
29+
<strong>resources/views/layouts/app.blade.php</strong>):
30+
</p>
31+
32+
<pre style={{ maxWidth: '500px' }}>
33+
<code>@include('sweetalert2::index')</code>
34+
</pre>
35+
36+
<p>
37+
You can now run <strong>Swal::fire()</strong> anywhere in your Laravel application (controllers, middleware,
38+
etc.) to show a SweetAlert2 alert:
39+
</p>
40+
41+
<CodeExample
42+
code={`use SweetAlert2\\Laravel\\Swal;
43+
44+
// same options as in Swal.fire()
45+
Swal::fire([
46+
'title' => 'Laravel + SweetAlert2 = <3',
47+
'text' => 'This is a simple alert using SweetAlert2',
48+
'icon' => 'success',
49+
'confirmButtonText' => 'Cool'
50+
]);
51+
52+
// or with a custom icon
53+
Swal::success([
54+
'title' => 'Popup with a success icon',
55+
]);
56+
Swal::error([
57+
'title' => 'Popup with an error icon',
58+
]);
59+
Swal::warning([
60+
'title' => 'Popup with a warning icon',
61+
]);
62+
Swal::info([
63+
'title' => 'Popup with an info icon',
64+
]);
65+
Swal::question([
66+
'title' => 'Popup with a question icon',
67+
]);
68+
69+
// or a toast
70+
Swal::toast([
71+
'title' => 'Toast',
72+
]);
73+
74+
// or a toast with a custom icon
75+
Swal::toastSuccess([
76+
'title' => 'Toast with a success icon',
77+
]);
78+
Swal::toastError([
79+
'title' => 'Toast with an error icon',
80+
]);
81+
Swal::toastWarning([
82+
'title' => 'Toast with a warning icon',
83+
]);
84+
Swal::toastInfo([
85+
'title' => 'Toast with an info icon',
86+
]);
87+
Swal::toastQuestion([
88+
'title' => 'Toast with a question icon',
89+
]);`}
90+
language="php"
91+
style={{maxWidth: '600px'}}
92+
withoutCodepen
93+
/>
94+
95+
<p>
96+
<img src="https://github.com/sweetalert2/sweetalert2-laravel/raw/main/sweetalert2-laravel.png" style={{ maxWidth: 840 }}/>
97+
</p>
98+
</>
99+
)
100+
}
101+
102+
ReactDOM.createRoot(document.getElementById('root')!).render(<Recipe />)

‎src/components/CodeExample.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,14 @@
11
import hljs from 'highlight.js/lib/core'
22
import langJavascript from 'highlight.js/lib/languages/javascript'
33
import langXml from 'highlight.js/lib/languages/xml'
4+
import langPhp from 'highlight.js/lib/languages/php'
45

56
import { useEffect, useRef } from 'react'
67
import type { MouseEventHandler, RefObject } from 'react'
78

89
type CodeExampleProps = {
910
code: string
10-
language?: 'javascript' | 'xml'
11+
language?: 'javascript' | 'xml' | 'php'
1112
codepenHtml?: string
1213
codepenCssExternal?: string
1314
withoutCodepen?: boolean
@@ -26,7 +27,6 @@ export function CodeExample({
2627
const codepenFormData = useRef(null) as RefObject<HTMLInputElement | null>
2728

2829
const isAsync = !!code.match(/(^|\n)\w.*await/)
29-
3030
useEffect(() => {
3131
if (
3232
!codeRef.current ||
@@ -38,6 +38,8 @@ export function CodeExample({
3838
hljs.registerLanguage('javascript', langJavascript)
3939
} else if (language === 'xml') {
4040
hljs.registerLanguage('xml', langXml)
41+
} else if (language === 'php') {
42+
hljs.registerLanguage('php', langPhp)
4143
}
4244
hljs.highlightElement(codeRef.current)
4345
}, [codeRef, language])

‎src/components/Installation.tsx‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,7 @@ import 'sweetalert2/src/sweetalert2.scss'`}
6767
</div>
6868

6969
<div className="center-container">
70-
<h3 id="frameworks-integrations">Integrations with major JS frameworks</h3>
70+
<h3 id="frameworks-integrations">Integrations with major frameworks</h3>
7171
<div className="frameworks-integrations">
7272
<div>
7373
<a
@@ -105,6 +105,18 @@ import 'sweetalert2/src/sweetalert2.scss'`}
105105
<img src="/images/angular.svg" width="125" alt="" />
106106
</a>
107107
</div>
108+
<div>
109+
<a
110+
href="https://github.com/sweetalert2/sweetalert2-laravel"
111+
target="_blank"
112+
rel="noopener"
113+
aria-label="Laravel integration"
114+
>
115+
Laravel
116+
<br />
117+
<img src="/images/laravel.svg" width="125" alt="" />
118+
</a>
119+
</div>
108120
</div>
109121
</div>
110122
</>

‎vite.config.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ export default defineConfig({
1515
'queue-with-progress-steps': 'recipe-gallery/queue-with-progress-steps.html',
1616
'bootstrap-custom-loader': 'recipe-gallery/bootstrap-custom-loader.html',
1717
'custom-icon': 'recipe-gallery/custom-icon.html',
18+
'sweetalert2-laravel': 'recipe-gallery/sweetalert2-laravel.html',
1819
'sweetalert2-react': 'recipe-gallery/sweetalert2-react.html',
1920
'sweetalert2-react-router': 'recipe-gallery/sweetalert2-react-router.html',
2021
'three-buttons-dialog': 'recipe-gallery/three-buttons-dialog.html',

0 commit comments

Comments
 (0)