Plugin
List of third-party plugins that Phoenix uses
Simple approach(without npm)
<p>Place your new plugin in <code>public/vendors</code> folder. Eg: to add the <code>flatpickr</code> plugin, we will download it from <a href="https://flatpickr.js.org/" target="_blank">here,</a> unzip it and place the <code>flatpickr-master</code> folder in <code>public/vendors</code> folder. You can now simply link the plugin files to your HTML and use them.</p>Place your new plugin in public/vendors folder. Eg: to add the flatpickr plugin, we will download it from here, unzip it and place the flatpickr-master folder in public/vendors folder. You can now simply link the plugin files to your HTML and use them.
Using npm
<p>Suppose we are installing the <code>flatpickr</code> plugin. Here are the steps:</p>
<p class="fw-bold font-sans-serif mb-0">Step 1:</p>
<p>run npm command for install plugin. for <code>flatpickr </code>we can run </p><Pre> <code class="lang-js">npm i flatpickr</code></Pre>
<p class="fw-bold font-sans-serif mb-0 mt-3">Step 2:</p>
<p>Go to <code>vendors.json </code>file and give the path directory from node_modules as follow</p><pre><code class="language-js">"flatpickr": {
"src": ["dist/flatpickr.min.js", "dist/flatpickr.min.css"],
"dest": "flatpickr"
}</code></pre>
<p>Here, <code>dest</code> refers to <code>public/vendors/</code>, where gulp will copy files from the <code>flatpickr</code> plugin. We actually use the <code>vendors</code> folder to store neccassary plugins. And all the plugins folder name will be as we give the dest value</p>
<p class="fw-bold font-sans-serif mb-0 mt-3">Step 3:</p>
<p>Run the following command:</p><pre><code class="lang-js">gulp vendor:move</code></pre>Suppose we are installing the flatpickr plugin. Here are the steps:
Step 1:
run npm command for install plugin. for flatpickr we can run
npm i flatpickr
Step 2:
Go to vendors.json file and give the path directory from node_modules as follow
"flatpickr": {
"src": ["dist/flatpickr.min.js", "dist/flatpickr.min.css"],
"dest": "flatpickr"
}Here, dest refers to public/vendors/, where gulp will copy files from the flatpickr plugin. We actually use the vendors folder to store neccassary plugins. And all the plugins folder name will be as we give the dest value
Step 3:
Run the following command:
gulp vendor:moveBuilt-in plugins
Anchor.js
A JavaScript utility for adding deep anchor links to existing page content. AnchorJS is lightweight, accessible, and has no dependencies.
Full DocumentationCountUp
CountUp.js is a dependency-free, lightweight JavaScript class that can be used to quickly create animations that display numerical data in a more interesting way.
Full DocumentationDayjs
Day.js 2KB immutable date-time library alternative to Moment.js with the same modern API.
Full DocumentationDropzone
Dropzone.js is one of the most popular drag and drop JavaScript libraries. It is free, fully open source, and makes it easy for you to handle dropped files on your website.
Full DocumentationEcharts.js
A powerful, interactive charting and visualization library for browser.
Full DocumentationFlatpickr
Lightweight, powerful javascript datetimepicker with no dependencies.
Full DocumentationFontAwesome 5
Get vector icons and social logos on your website with Font Awesome, the web's most popular icon set and toolkit.
Full DocumentationFullCalendar
FullCalendar generates real React virtual DOM nodes so you can leverage Fiber, React's highly optimized rendering engine.
Full DocumentationGlightbox
Glightbox is a pure javascript lightbox. It can display images, iframes, inline content and videos with optional autoplay for YouTube, Vimeo and even self hosted videos.
Full DocumentationGoogle Map
Phoenix uses Google map with Snazzy Maps, with different color schemes aimed towards web designers and developers.
Full DocumentationIs.js
Micro check plugin. Check types, regexps, presence, time and more...
Full DocumentationList.js
Tiny, invisible and simple, yet powerful and incredibly fast vanilla JavaScript that adds search, sort, filters and flexibility to plain HTML lists, tables, or anything.
Full DocumentationLodash
A modern JavaScript utility library delivering modularity, performance, & extras.
Full DocumentationRater
Star rating widget for the browser. Unlimited number of stars. No dependencies. No Jquery required.
Full DocumentationSortablejs
Reorderable drag-and-drop lists for modern browsers and touch devices. No jQuery or framework required.
Full DocumentationSwiper
Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior. It is intended to be used in mobile websites, mobile web apps, and mobile native/hybrid apps.
Full DocumentationTinymce
The world's most popular JavaScript library for rich text editing.
Full DocumentationTyped Text
A JavaScript library that types out, deletes them, and then types again.
Full Documentation