Hidden

Overview

Converts a string to PascalCase format by using camelCase internally and capitalizing the first letter. Handles various separator types and creates proper PascalCase naming.

pascalCase(/str/);

Features

• Converts strings to PascalCase format (first letter capitalized)
• Uses camelCase conversion internally for consistency
• Handles multiple separator types (spaces, dashes, underscores, dots, etc.)
• Returns empty string for invalid inputs
• Perfect for class names and component naming
• Simple and intuitive API
• Leverages existing camelCase utility
• Comprehensive testing

Arguments

Arg	Type	Default Value	Required
str	string	-	Yes

Usage

Use the pascalCase() function to convert strings to PascalCase format.

import { pascalCase } from '@inpulse-ui/utils';

const result = pascalCase('hello world');
console.log(result); // "HelloWorld"

Handles various separator types:

console.log(pascalCase('hello-world')); // "HelloWorld"
console.log(pascalCase('hello_world')); // "HelloWorld"
console.log(pascalCase('hello.world')); // "HelloWorld"
console.log(pascalCase('hello,world')); // "HelloWorld"
console.log(pascalCase('hello;world')); // "HelloWorld"

Works with complex separator combinations:

console.log(pascalCase('user-profile_settings.page')); // "UserProfileSettingsPage"
console.log(pascalCase('api-key/config-file')); // "ApiKeyConfigFile"
console.log(pascalCase('my awesome component')); // "MyAwesomeComponent"

Returns empty string for invalid inputs:

console.log(pascalCase('')); // ""
console.log(pascalCase(null)); // ""
console.log(pascalCase(undefined)); // ""
console.log(pascalCase(123)); // ""

Examples

React component generation - converting descriptive names to proper component names:

import { pascalCase } from '@inpulse-ui/utils';

// Component descriptions from design system
const componentSpecs = [
  'navigation header',
  'user-profile-card',
  'product_search_filter',
  'shopping.cart.summary'
];

// Generate component names
const components = componentSpecs.map(spec => ({
  name: pascalCase(spec),
  fileName: `${pascalCase(spec)}.tsx`,
  displayName: spec
}));

console.log(components);
// [
//   { name: 'NavigationHeader', fileName: 'NavigationHeader.tsx', displayName: 'navigation header' },
//   { name: 'UserProfileCard', fileName: 'UserProfileCard.tsx', displayName: 'user-profile-card' },
//   { name: 'ProductSearchFilter', fileName: 'ProductSearchFilter.tsx', displayName: 'product_search_filter' },
//   { name: 'ShoppingCartSummary', fileName: 'ShoppingCartSummary.tsx', displayName: 'shopping.cart.summary' }
// ]

// Generate component files
components.forEach(component => {
  console.log(`Creating component: ${component.fileName}`);
  // createComponentFile(component.name, component.fileName);
});

Component name generation:

const componentNames = [
  'user profile',
  'navigation-bar',
  'search_input',
  'product.card'
];

const pascalNames = componentNames.map(name => pascalCase(name));
console.log(pascalNames);
// ['UserProfile', 'NavigationBar', 'SearchInput', 'ProductCard']

Class name generation:

const classDescriptions = [
  'user service',
  'api-client',
  'data_processor',
  'event.handler'
];

const classNames = classDescriptions.map(desc => pascalCase(desc));
console.log(classNames);
// ['UserService', 'ApiClient', 'DataProcessor', 'EventHandler']

File name to class conversion:

const fileNames = [
  'user-manager.js',
  'email_service.ts',
  'order.processor.js',
  'payment-gateway.ts'
];

const classNames = fileNames.map(fileName => {
  const nameWithoutExt = fileName.split('.')[0];
  return pascalCase(nameWithoutExt);
});

console.log(classNames);
// ['UserManager', 'EmailService', 'OrderProcessor', 'PaymentGateway']