Premium
JAVASCRIPT Snippets.

Smoothly Scroll an Element Into the Visible Viewport

Learn to programmatically scroll any DOM element into the user's visible viewport with a smooth animation, improving user experience for navigation or highlighting content.

Enforce Strong Password Requirements

Implement a JavaScript regex pattern to validate strong passwords, requiring a minimum length, uppercase, lowercase, numbers, and special characters.

Validate Hexadecimal Color Codes

Use a JavaScript regular expression to validate both 3-digit (#RGB) and 6-digit (#RRGGBB) hexadecimal color codes for styling and input validation.

Remove HTML Tags from User Input

Learn to sanitize user-generated content by effectively stripping out all HTML tags using a regular expression in JavaScript to prevent XSS vulnerabilities.

Detect Online/Offline Network Status with a Custom React Hook

Create a custom React hook to efficiently detect and provide the current online or offline status of the user's browser, enabling adaptive UI experiences.

Get the Previous Value of a Prop or State in React

Implement a custom `usePrevious` React hook to easily access the value a prop or state had on the previous render, useful for comparisons and conditional logic.

Detect Clicks Outside a Component with a React Hook

Create a `useClickOutside` React hook to easily handle events when a user clicks anywhere outside a specified DOM element, perfect for dropdowns and modals.

Track Real-time Window Dimensions with a Custom React Hook

Build a `useWindowSize` React hook to dynamically get the current width and height of the browser window, enabling responsive component rendering.

Safely Manage `setInterval` with a Custom React Hook

Implement a `useInterval` hook to safely execute a function repeatedly with a fixed time delay, ensuring proper cleanup and preventing common `setInterval` pitfalls in React.

Toggle CSS Class on Click

Learn how to dynamically add or remove a CSS class from an HTML element when a user clicks it, enhancing interactive UI elements effortlessly.

Prevent Default Form Submission

Understand how to intercept and prevent the default browser behavior of a form submission, allowing for custom AJAX submissions or client-side validation.

Insert Element Before Sibling

Learn to dynamically insert a new HTML element right before an existing sibling element within the DOM, useful for flexible content arrangement on the fly.