React Component Naming Conventions
As the saying goes, there are only 2 hard problems in computer science:
Cache invalidation
Naming things
Off by 1 errors
When you're building a component library, whether with react or any UI framework, naming things is the challenge that surfaces. Here's my current take on approaching this problem.
Component Naming Guidelines
keep it as simple and focused as possible
Use utility specific language - what is the key function of the component? What does the component do for the developer? How is it used? What developer need does the component address?
Do not include extra words that don’t help the developer understand the component function
Use vocabulary consistent with the html spec
eg; if html spec has input type=”number”, NumberInput is a better name for that component than NumericInput
If the naming is difficult, break down the component further into smaller atoms and molecules that are easier to name simply
Add JSDoc comments before your components /** */ describing to a developer the basic usage of the component. These will show up in VSCode on hover.
Ambiguities / Research
Do names go from general to specific or specific to general? InputText or TextInput? The first allows similar components to be sorted next to eachother in the component list, while the second allows the first part of the component name to be the most specific and reads better in the markup in many scenarios.