The Ultimate
Snippet Library.

Persisting State with useLocalStorage

Create a custom React hook `useLocalStorage` to effortlessly synchronize your component's state with the browser's Local Storage, ensuring data persistence across sessions.

Handling Clicks Outside with useOnClickOutside

Implement a reusable React hook `useOnClickOutside` to detect clicks that occur outside a specified component, perfect for closing modals, dropdowns, or sidebars.

Responding to Media Queries with useMediaQuery

Build a custom React hook `useMediaQuery` to programmatically detect and react to CSS media query changes, enabling dynamic responsive UI adjustments in your components.

Declarative setTimeout with useTimeout

Learn to create a `useTimeout` React hook for declarative, self-cleaning `setTimeout` operations, making it easy to schedule actions without memory leaks.

Efficient Debouncing for React Inputs with `useDebounce`

Learn to create a custom `useDebounce` React hook to delay state updates, optimizing performance for search inputs and preventing excessive function calls.

Synchronize React State with URL Query Parameters

Learn to build a `useQueryParamsSync` hook to read and write React state directly to URL query parameters, enabling shareable and bookmarkable filtered views.

Implement Data Polling with `usePolling` for Real-time Updates

Create a `usePolling` custom hook in React to periodically fetch data from an API, enabling real-time dashboards or background updates with customizable intervals.

Reusable Query Filters with Local and Global Scopes in Laravel Eloquent

Simplify and reuse common query constraints across your Laravel application by defining powerful local and global Eloquent scopes for models.

Custom Data Formatting with Eloquent Mutators and Accessors

Transform model attribute values on the fly in Laravel. Learn to use accessors for retrieval and mutators for storing formatted data.

Implementing Soft Deletes for Non-Destructive Data Removal in Laravel Eloquent

Add soft delete functionality to your Laravel models, allowing records to be 'trashed' rather than permanently deleted, enabling easy restoration.

Vue 3 Global Theme Management with Pinia

Implement a simple Pinia store in Vue 3 to manage and persist global application themes (light/dark mode) across components, ensuring reactivity.

Vue 3 Deep Component Communication with Provide/Inject

Share configuration or reactive state deep down your component tree in Vue 3 using the `provide` and `inject` API, avoiding excessive prop drilling.