instajax
v1.6.1
Published
Instantly move your multi page application navigations to AJAX
Downloads
682
Maintainers
Readme
🚀 Instajax
Instajax is a lightweight JavaScript library that enhances web app navigation by seamlessly updating
content via AJAX without reloading the page. It leverages modern browser features like fetch
,
history.pushState
, and MutationObserver
to provide a smooth user experience.
📋 Features
- ⚡ Lightweight: Extremely lightweight, perfect for performance-conscious applications.
- 🌍 Seamless Navigation: Updates content without reloading the page using AJAX.
- 🖥️ Modern Browser Support: Utilizes cutting-edge browser APIs (
fetch
,history.pushState
, andMutationObserver
). - 🎨 Customization Options: Easily customize error templates with HTML strings or URLs to external files.
- 🛠️ Easy Integration: Seamlessly integrates into projects via CDN, npm, or yarn for easy adoption.
🛠️ Usage
CDN Method
Put the script tag to head of your template HTML. It will initialize automatically.
<script type="module" src="https://unpkg.com/[email protected]/dist/min.js"></script>
Package Manager Method
You can install it via npm or yarn and import it in your project:
npm install instajax
Then in your main client-side JavaScript code, just import it:
import 'instajax';
Within your HTML, Instajax will handle links automatically without reloading the page:
<a href="/new-page">Go to new page via instajax</a>
<a href="/new-page" class="skip-instajax">Go to new page without instajax</a>
🎨 Customization
To customize the error template, you can call the default function with a custom HTML string or URL pointing to an HTML file:
import instajax from 'instajax';
instajax({ errorHTML: '<div class="error">%error%</div>' });
or
instajax({ errorHTML: 'url("/error.html")' });
📡 API Functions
default({ errorHTML })
Customizes the default error template with a provided HTML string or URL pointing to an HTML file.