Maya Patel

50 code snips · on codesnips 5 months

Rails + React specialist building modern SPAs with Rails APIs. Expert in React hooks, state management, TypeScript, and seamless Rails integration. 9+ years creating performant,...

typescript
import React, { createContext, useContext, useEffect, useState, ReactNode } from 'react'

type Theme = 'light' | 'dark'

interface ThemeContextType {
  theme: Theme

Dark mode with Tailwind and localStorage persistence

react tailwind dark-mode
by Maya Patel 3 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 { Helmet } from 'react-helmet-async'

interface SEOProps {
  title: string
  description: string
  image?: string

SEO optimization with React Helmet

react seo react-helmet
by Maya Patel 2 tabs
typescript
import { FixedSizeList as List } from 'react-window'
import AutoSizer from 'react-virtualized-auto-sizer'
import { Post } from '@/types'
import { PostCard } from './PostCard'

interface VirtualizedPostListProps {

Virtual scrolling for large lists with react-window

react performance virtual-scrolling
by Maya Patel 1 tab
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 { 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 { create } from 'zustand'
import { persist } from 'zustand/middleware'

interface FilterState {
  search: string
  category: string | null

Zustand for lightweight state management

react zustand state-management
by Maya Patel 2 tabs
typescript
import { lazy, Suspense } from 'react'
import { BrowserRouter, Routes, Route } from 'react-router-dom'
import Layout from '@/components/Layout'

// Eager load critical routes
import Home from '@/pages/Home'

Lazy loading routes with React.lazy and Suspense

react performance code-splitting
by Maya Patel 1 tab
typescript
import React, { createContext, useContext, useState, ReactNode } from 'react'

interface TabsContextType {
  activeTab: string
  setActiveTab: (tab: string) => void
}

Compound components pattern for flexible APIs

react patterns components
by Maya Patel 2 tabs
typescript
import { useState, useRef } from 'react'
import { DirectUpload } from '@rails/activestorage'

interface ImageUploadProps {
  onUploadComplete: (blobId: string) => void
  maxSize?: number

Image upload with preview and Rails Direct Upload

react rails activestorage
by Maya Patel 1 tab
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 { useEffect, useRef, ReactNode } from 'react'
import { createPortal } from 'react-dom'

interface ModalProps {
  isOpen: boolean
  onClose: () => void

Modal dialogs with focus trapping and accessibility

react accessibility modal
by Maya Patel 1 tab