react

typescript
import { useInfiniteQuery } from '@tanstack/react-query'
import api from '@/services/api'
import { Post, PaginatedResponse } from '@/types'

export function useInfinitePosts() {
  return useInfiniteQuery({

Infinite scroll with Intersection Observer

react infinite-scroll react-query
by Maya Patel 2 tabs
typescript
import { useEffect } from 'react'

interface KeyboardHandlers {
  [key: string]: () => void
}

Keyboard navigation and focus management

react accessibility keyboard
by Maya Patel 2 tabs
typescript
import ReactMarkdown from 'react-markdown'
import remarkGfm from 'remark-gfm'
import rehypeSanitize from 'rehype-sanitize'
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
import { tomorrow } from 'react-syntax-highlighter/dist/esm/styles/prism'

Markdown rendering with react-markdown

react markdown content
by Maya Patel 1 tab
typescript
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import path from 'path'

export default defineConfig({
  plugins: [react()],

React app structure with Vite and TypeScript

react vite typescript
by Maya Patel 2 tabs
typescript
import React, { createContext, useContext, useState, ReactNode } from 'react'

type ToastType = 'success' | 'error' | 'info' | 'warning'

interface Toast {
  id: string

Toast notifications system

react notifications context
by Maya Patel 1 tab
typescript
import { useCallback, useEffect, useState } from "react";

interface Options {
  rootMargin?: string;
  threshold?: number;
}

IntersectionObserver infinite scroll hook

react hooks intersection-observer
by codesnips 3 tabs
typescript
import { http, HttpResponse } from 'msw';

export interface Product {
  id: number;
  name: string;
}

MSW for frontend API mocking in tests

testing frontend react
by codesnips 4 tabs
typescript
import React, { createContext, useContext, useState, useEffect, ReactNode } from 'react'
import { User } from '@/types'
import api from '@/services/api'

interface AuthContextType {
  user: User | null

Context API for global UI state

react context hooks
by Maya Patel 1 tab
typescript
import { render, screen } from '@testing-library/react'
import userEvent from '@testing-library/user-event'
import { PostCard } from '../PostCard'
import { Post } from '@/types'

const mockPost: Post = {

React Testing Library for component tests

react testing testing-library
by Maya Patel 2 tabs
typescript
import { z } from 'zod'

export const postSchema = z.object({
  title: z
    .string()
    .min(5, 'Title must be at least 5 characters')

React Hook Form with Zod validation

react forms react-hook-form
by Maya Patel 2 tabs
typescript
import { useMutation, useQueryClient } from '@tanstack/react-query'
import api from '@/services/api'
import { Post, PostId } from '@/types'

export function useLikePost() {
  const queryClient = useQueryClient()

Optimistic updates with React Query mutations

react react-query optimistic-updates
by Maya Patel 2 tabs
typescript
import { useEffect, RefObject } from "react";

const TABBABLE =
  'a[href],button:not([disabled]),textarea:not([disabled]),input:not([disabled]),select:not([disabled]),[tabindex]:not([tabindex="-1"])';

export function useFocusTrap(

Accessible modal with focus trap

react a11y accessibility
by codesnips 4 tabs