Convert Text to PascalCase
Learn how to convert text to PascalCase (UpperCamelCase) for class names, React components, and TypeScript types. Understand the difference between PascalCase and camelCase.
Detailed Explanation
Converting Text to PascalCase
PascalCase (also called UpperCamelCase) joins multiple words together with no separators, capitalizing the first letter of every word — including the first. It is named after the Pascal programming language, which popularized this convention.
Basic Conversion
Input: user profile card
Output: UserProfileCard
Input: get-api-response
Output: GetApiResponse
Input: max_retry_count
Output: MaxRetryCount
PascalCase vs. camelCase
The only difference is the first character:
PascalCase: UserProfile
camelCase: userProfile
In most ecosystems, PascalCase is used for "types" (classes, interfaces, components) while camelCase is used for "instances" (variables, functions, methods).
Where PascalCase Is Used
// TypeScript / JavaScript — Classes and React components
class UserService { /* ... */ }
function UserProfileCard({ name }: Props) { /* ... */ }
// TypeScript — Interfaces and type aliases
interface UserResponse { id: number; name: string; }
type PaymentStatus = "pending" | "completed" | "failed";
// C# — Classes, methods, properties, namespaces
public class HttpClient { /* ... */ }
public string GetUserName() { /* ... */ }
// Go — Exported identifiers (public)
func GetUserByID(id int) (*User, error) { /* ... */ }
type DatabaseConfig struct { /* ... */ }
File Naming Conventions
In React projects, component files typically use PascalCase:
UserProfileCard.tsx
NavigationMenu.tsx
PaymentForm.tsx
This makes it easy to distinguish component files from utility files (which use camelCase or kebab-case).
Handling Acronyms
Like camelCase, there are two approaches to acronyms:
"HTTP response" → HttpResponse (preferred)
"HTTP response" → HTTPResponse (preserves acronym)
The first approach is recommended because it keeps word boundaries visually clear.
Conversion Algorithm
- Split the input into words (by spaces, hyphens, underscores, or case transitions).
- Lowercase each word entirely.
- Capitalize the first character of each word.
- Join all words together with no separator.
Edge Cases
- Single word:
"hello"→"Hello". - Already PascalCase: the input passes through unchanged.
- All uppercase:
"HTTP CLIENT"→"HttpClient". - Numbers:
"form step 2"→"FormStep2".
Use Case
PascalCase is required for React and Vue component names, TypeScript interfaces and type aliases, C# class and method names, Go exported identifiers, and Java class names. When scaffolding components or generating code from templates, converting free-form text to PascalCase ensures compliance with language conventions.