Premium
JAVASCRIPT Snippets.

Persist State with `useLocalStorage` React Hook

Create a `useLocalStorage` hook to effortlessly synchronize and persist React state with the browser's local storage, ensuring data remains available across page reloads.

Track Previous State or Prop with `usePrevious`

Develop a `usePrevious` React hook to access the previous value of any state or prop, enabling comparisons and logic based on changes over time in your components.

Respond to CSS Media Queries with `useMediaQuery`

Build a `useMediaQuery` React hook to programmatically detect if a CSS media query matches, allowing dynamic component rendering and styling based on screen size.

Validate Email Address with Regex

Learn to validate email addresses using a robust regular expression in JavaScript to ensure correct format for user input.

Validate URL Format with Regex

Implement a JavaScript function to validate URLs, ensuring they follow standard protocols (http/https) and domain structures.

Validate Strong Password with Regex Criteria

Check password strength in JavaScript using regex to enforce requirements like uppercase, lowercase, numbers, special characters, and minimum length.

Extract Hashtags from Text String

Discover how to efficiently extract all hashtags from a given text string using a regular expression in JavaScript, perfect for social media features.

Remove HTML Tags from String Input

Sanitize user input by removing all HTML tags from a string using a regular expression, preventing potential cross-site scripting (XSS) vulnerabilities.

Implement a Repeating Interval with `useInterval` React Hook

Create a custom React `useInterval` hook to easily manage `setInterval` logic within your components, ensuring proper cleanup on unmount and preventing memory leaks.

Attach and Clean Up Event Listeners with `useEventListener` React Hook

Create a reusable `useEventListener` React hook to easily attach and remove DOM event listeners, improving component lifecycle management and preventing memory leaks.

Execute Code on Component Mount and Unmount with Custom Hooks

Implement `useMount` and `useUnmount` React hooks to run specific logic exactly once when a component is mounted or unmounted, mimicking class component lifecycles.

Safely Use `useLayoutEffect` in SSR Environments with `useIsomorphicLayoutEffect`

Implement `useIsomorphicLayoutEffect` to conditionally use `useLayoutEffect` on the client-side and `useEffect` on the server-side, preventing SSR warnings in React.