Simple React Code Generator

it will generator some initial skeleton code based on file name

Now supports multiple filename formats! The extension automatically converts various filename formats to PascalCase for proper React component naming.

Supported Filename Formats

• PascalCase: ProfileAvatar.tsx → ProfileAvatar
• camelCase: profileAvatar.tsx → ProfileAvatar
• kebab-case: profile-avatar.tsx → ProfileAvatar
• snake_case: profile_avatar.tsx → ProfileAvatar
• Regular words: profile avatar.tsx → ProfileAvatar

Usage

if your file name is ProfileAvatar.tsx (or any of the supported formats),

after creating the file, run cmd + shift + p, and choose Simple React: Generate code based on file name

it will generate

import React, { FC } from "react";

export interface ProfileAvatarProps {
  className?: string;
}

export const ProfileAvatar: FC<ProfileAvatarProps> = ({ className }) => {
  return <div className={className}> ProfileAvatar Component </div>;
};

Examples