Premium
JAVASCRIPT Snippets.

Efficiently Debounce State Updates with useDebounce Hook

Custom React hook `useDebounce` delays updating a state value until a specified time passes, optimizing performance for search inputs or frequent API calls.

Persist React State Across Sessions with useLocalStorage Hook

A custom React hook `useLocalStorage` simplifies synchronizing component state with local storage, ensuring data persists even after page refreshes.

Detect Clicks Outside an Element with useClickOutside Hook

Custom React hook `useClickOutside` helps components like dropdowns or modals close automatically when a user clicks anywhere outside their boundaries.

Access Previous State or Prop Values with usePrevious Hook

The `usePrevious` custom React hook provides a simple way to store and retrieve the previous value of any given state or prop, useful for change detection.

Respond to CSS Media Queries in React with useMediaQuery Hook

Custom React hook `useMediaQuery` allows components to react to CSS media queries, enabling dynamic styling or rendering based on screen size.

Enforce Strong Password Policies with Regex

Validate strong password requirements (min length, uppercase, lowercase, number, special character) with a single JavaScript regular expression for enhanced security.

Setting Secure, HttpOnly, and SameSite Cookies in Node.js

Secure your web application's cookies by setting HttpOnly, Secure, and SameSite attributes in Node.js/Express to prevent common session hijacking vulnerabilities.

Configuring Cross-Origin Resource Sharing (CORS) in Express.js

Securely enable Cross-Origin Resource Sharing (CORS) in your Express.js application, allowing only specified domains to access your API resources.

Building a Reusable Modal with Teleport and Slots in Vue 3

Create a flexible and accessible modal component in Vue 3 using `Teleport` to render content outside the app, and `slots` for customizable headers, body, and footers.

Custom Directive for Auto-Focusing an Input in Vue 3

Implement a Vue 3 custom directive to automatically focus an input field or any focusable DOM element when it's rendered. Enhance user experience with declarative focus management.

Dynamic Components with `is` and `KeepAlive` for Tabbed Interface in Vue 3

Learn to create flexible user interfaces in Vue 3 using dynamic components with the `is` attribute, and `KeepAlive` to preserve component state when switching tabs.

Vue 3 Composable for Basic Form Input Validation

Create a reusable Vue 3 composable to easily implement client-side form input validation, checking for common rules like required fields and minimum length.