Premium
JAVASCRIPT Snippets.

Implement CSRF Protection with Express and `csurf`

Protect web applications from Cross-Site Request Forgery (CSRF) attacks by integrating a token-based middleware in Express.js for secure form submissions.

Configure Essential Security HTTP Headers in Express

Enhance web application security by setting critical HTTP headers like HSTS, CSP, X-Frame-Options, and X-Content-Type-Options using Helmet.js in Express.

Server-Side Input Sanitization for XSS Prevention

Sanitize user-provided input on the server-side to prevent Cross-Site Scripting (XSS) attacks, ensuring only safe content is processed and displayed.

Configure Secure and HttpOnly Cookies in Express

Enhance session security by setting `HttpOnly`, `Secure`, and `SameSite` flags on cookies in Express.js, protecting against XSS attacks and CSRF.

Get the Previous Value of a State or Prop

A custom React hook to efficiently track and return the previous value of any state or prop, ideal for comparing current and past values in useEffect.

Track and Access Browser Window Dimensions

A custom React hook to get and react to changes in the browser window's `width` and `height`, useful for creating responsive UI components.

Declarative setInterval Hook for React

A reliable custom React hook to easily manage `setInterval` functionality, preventing common closure issues and ensuring proper cleanup.

Copy Text to Clipboard with a React Hook

A custom React hook to simplify copying text to the user's clipboard, providing feedback on success or failure of the operation.

Debounce State Updates with a Custom Hook

Learn to create a custom React hook for debouncing any state value, optimizing performance by delaying updates until user input settles, preventing excessive re-renders.

Detect Clicks Outside a Component with a Custom Hook

Implement a reusable custom React hook to detect clicks outside a specified DOM element, perfect for closing modals, dropdowns, or tooltips efficiently.

Safely Handle Asynchronous Operations with a useIsMounted Hook

Develop a custom React hook to track if a component is currently mounted, preventing memory leaks and errors when performing asynchronous state updates.

Detect Online/Offline Status with a Custom Hook

Create a simple custom React hook to track the user's network connection status (online or offline), enabling responsive UI/UX based on connectivity.