← All components
jQuery
Adds jQuery (v4.0.0) to the project. NOTE: Pairing jQuery's direct DOM manipulation with React's virtual DOM is an unusual combination for a generated app — real and sourceable regardless. jQuery provides cross-browser DOM manipulation, event handling, animation, and AJAX capabilities. Use sparingly in React applications and prefer React's declarative approach where possible.
Copy the files below, or open this folder on GitHub. Each file is stamped with a limited-use licence, generator and date. SHA-256 is of the published catalog bytes, before the stamp.
- id
- jquery
- stack
- Next.js
- version
- 1.0.0
- compatibility
- nextjs >=16 <17 · react >=19 <20
- requires
- nextjs-base
- env vars
- —
Verified passing · daily buildIntegrity sha256:7973dede67e672b0…
Files (1)
lib/jquery.ts · sha256:7973dede67e672b0…
// Licensed by BotKelp — https://www.botkelp.com
/**
* jQuery initialization and utilities.
*
* This module provides jQuery initialization and helper functions
* for use in Next.js applications.
*
* IMPORTANT: Pairing jQuery's direct DOM manipulation with React's virtual DOM
* is an unusual combination. Use sparingly and prefer React's declarative
* approach where possible. jQuery should only be used for specific legacy
* integrations or third-party libraries that require it.
*
* See: https://api.jquery.com/
*/
import $ from 'jquery';
// Ensure jQuery is available globally for legacy scripts
if (typeof window !== 'undefined') {
// @ts-ignore - Assigning to global window object
window.jQuery = $;
// @ts-ignore - Assigning to global window object
window.$ = $;
}
/**
* Initialize jQuery on DOM ready.
* This is useful for running jQuery code when the DOM is ready.
*/
export const onDOMReady = (callback: () => void): void => {
$(() => {
callback();
});
};
/**
* Check if jQuery is loaded and available.
*/
export const isjQueryLoaded = (): boolean => {
return typeof $ !== 'undefined' && $?.fn?.jquery !== undefined;
};
/**
* Get jQuery version.
*/
export const getjQueryVersion = (): string => {
return $.fn.jquery || 'unknown';
};
/**
* Safely execute jQuery code with error handling.
*/
export const safejQuery = <T>(fn: () => T, fallback: T): T => {
try {
if (!isjQueryLoaded()) {
console.warn('jQuery is not loaded');
return fallback;
}
return fn();
} catch (error) {
console.error('jQuery operation failed:', error);
return fallback;
}
};
// Export jQuery instance
export { $ };
export default $;