Loading page
About this tool
Audit React component names, file names, duplicate declarations, and naming convention drift.
The Component Naming Auditor scans pasted file paths and React snippets for three specific kinds of naming drift: declarations after function, const or class that are not PascalCase, file names whose basename contains a kebab-case hyphen, and the same component name declared more than once. It is aimed at reviewers and anyone tidying a codebase that grew through several hands, and it returns a count of files, a count of components and a labelled list of findings. It reads only the text you paste, so it is a convention check rather than a compiler or linter.
Open Component Naming Auditor on AltFTool — it loads instantly in your browser.
Paste your code into the box labelled 'File paths and component snippets'. It opens pre-filled with a sample covering src/components/UserCard.jsx, src/components/profile-card.jsx and src/tools/report/ReportPanel.jsx, so clear that first; there is no run button, the audit re-runs as you type.
Watch the Files, Components and Issues counters above the results: the auditor picks up paths ending in .jsx, .tsx, .js or .ts, and every name declared with function, const or class.
Work through the Naming findings list, which tags each problem 'Component should use PascalCase.', 'Consider matching component-style file naming.' or 'Duplicate component declaration.', and reads 'No naming issues found.' once the pasted text is clean.
It matches paths ending in .js, .jsx, .ts or .tsx alongside the declarations in the same paste, so a PascalCase component sitting in a kebab-case file is caught as its own finding.
Any component name appearing twice in the pasted text is listed explicitly, which is the failure that import autocomplete hides until something renders the wrong thing.
You paste a fragment and get findings, with no config file, dependency install or lint rule to wire up first, which suits a review of code you do not have checked out.
PascalCase, tested as a leading uppercase letter followed only by letters and digits. Names like userCard, user_card or UserCard2 behave differently under that rule: the first two are flagged, digits are allowed, and underscores or leading lowercase are not.
JSX treats a lowercase tag as a built-in HTML element and an uppercase tag as a variable reference, so <userCard /> compiles to a literal userCard element rather than your component. That is the practical reason the PascalCase check matters more than style preference.
It flags them as a suggestion, not an error. Any file whose basename contains a lowercase letter immediately followed by a hyphen, such as profile-card.jsx, is listed with a note to consider matching your component-style file naming — plenty of teams deliberately use kebab-case files, so treat it as a consistency prompt.
No. It applies three regex checks to text you paste and never parses the code or resolves imports, so it will not catch hook rule violations, unused variables or anything requiring a real AST. Use it as a quick review pass and keep eslint-plugin-react in the repo for enforcement.