Premium
JAVASCRIPT Snippets.

React `useClickOutside` Hook for Closing Modals/Dropdowns

A custom React hook to detect clicks outside a specific DOM element, useful for closing modals, dropdowns, or popovers when a user clicks away.

React `useKeyPress` Hook for Keyboard Shortcuts

A custom React hook to detect if a specific keyboard key is currently pressed, enabling easy implementation of keyboard shortcuts or game controls in components.

React `useIsMounted` Hook for Safe Async Operations

A simple React hook to track if a component is currently mounted, preventing "Can't perform a React state update on an unmounted component" warnings in asynchronous operations.

React `useMediaQuery` Hook for Responsive Design

A custom React hook that allows components to reactively respond to CSS media queries, enabling dynamic styling or rendering based on screen size or device features.

React `useWindowSize` Hook for Dynamic Layouts

A custom React hook to track and provide the current width and height of the browser window, useful for building responsive layouts and components.

Implement Secure Password Hashing with Bcrypt

Learn how to securely hash user passwords using the bcrypt library in Node.js to protect against brute-force and rainbow table attacks, a critical security measure.

Implement CSRF Protection Middleware in Express.js

Secure your Express.js applications against Cross-Site Request Forgery (CSRF) attacks by implementing the `csurf` middleware for robust token validation on state-changing requests.

Sanitize User Input to Prevent XSS with DOMPurify

Prevent Cross-Site Scripting (XSS) attacks by safely sanitizing user-generated HTML content before rendering, utilizing the robust DOMPurify library for comprehensive protection.

Enforce Essential HTTP Security Headers in Express.js

Strengthen your web application's defense against common attacks by automatically setting critical HTTP security headers using Helmet middleware in Express.js.

Creating a `useDebounce` Hook for Delayed Value Updates

Learn to create a custom `useDebounce` React hook to delay updates of any value, perfect for optimizing search inputs, filtering, and API calls by reducing unnecessary re-renders or requests.

Syncing React State with Local Storage using `useLocalStorage`

Build a `useLocalStorage` React hook to easily persist and retrieve component state in the browser's local storage, ensuring data remains available across page refreshes.

Tracking Previous State or Props with the `usePrevious` Hook

Implement a `usePrevious` React hook to easily access the previous value of any state or prop, useful for comparing current and past values in `useEffect` or other logic.