Skip to main content

Naming conventions

Base components

Base components (presentational, dumb, or pure components) that apply app-specific styling and conventions should all include a specific suffix, such as Base.

Base components example
|- InputBase.tsx
|- IconBase.tsx
|- SceneBase.tsx

Order of words

Component names should start with the highest-level (often most general) words and end with descriptive modifying words.

It is not a natural English language yet it is far more practical. Files are usually sorted alphabetically and this helps us keep related components next to each other.

Wrong names gives bad experience
|- Area.tsx
|- BaseScene.tsx
|- CenteredScene.tsx
|- Input.tsx
|- InputForm.tsx
|- PasswordInput.tsx
|- StructuredScene.tsx
|- TextAreaForm.tsx
Good names, related files next to each other
|- FormInput.tsx
|- FormTextArea.tsx
|- InputArea.tsx
|- InputBase.tsx
|- InputPassword.tsx
|- SceneBase.tsx
|- SceneCentered.tsx
|- SceneStructured.tsx

Components that are inside a folder with their parent and using them without the parent makes little sense should have the parent name as a prefix.

If a component only makes sense in the context of a single parent component, that relationship should be evident in its name. Since editors typically organise files alphabetically, this also keeps these related files next to each other. – Vue Style Guide

More good practices

These naming conventions are inspired by Vue Style Guide. We are in a React project here – I know that. Yet, this style guide is very universal and I encourage you to take a look at it.