DEV Community

itouoti12
itouoti12

Posted on

Naming conventions for easy identification of StyledComponent and ReactComponent

Do you have a good idea for a naming convention that makes it easy to distinguish between StyledComponent and ReactComponent?

I'm using StyledComponent in my current job.
In the source code, StyledComponent and ReactComponent have the same naming conventions, making it difficult to determine which type of component it is at a glance.

As my refactoring, I changed the naming as follows.

Example

before

return (
  <ScheduleContainer>
    <Header>
      <Date>
        Hello!
      </Date>
      <TypeSelectorContainer>
        <TypeSelector />
      </TypeSelectorContainer>
    </Header>
  </ScheduleContainer>
);

Enter fullscreen mode Exit fullscreen mode

after

return (
  <Div_ScheduleContainer>
    <Header>   // <-React component
      <H2_Date>
        Hello!
      </H2_Date>
      <Div_TypeSelectorContainer>
        <TypeSelector />  // <-React component
      </Div_TypeSelectorContainer>
    </Header>  // <-React component
  </Div_ScheduleContainer>
);
Enter fullscreen mode Exit fullscreen mode

However, this refactoring violates react/jsx-pascal-case in ESLint.

Do you have any better ideas than this?

Thanks for reading.

Top comments (2)

Collapse
 
arung86 profile image
Arun Kumar G

What if you add prefix for each component like this?
StyledButton
StyledDate
so you can easily identify by the name and serves the purpose

Collapse
 
itouoti12 profile image
itouoti12

Incorporating Alan's input

return (
  <StyledScheduleContainer>
    <Header>   // <-React component
      <StyledDate>
        Hello!
      </StyledDate>
      <StyledTypeSelectorContainer>
        <TypeSelector />  // <-React component
      </StyledTypeSelectorContainer>
    </Header>  // <-React component
  </StyledScheduleContainer>
);
Enter fullscreen mode Exit fullscreen mode

I see.

This might make it easier to identify StyledComponent.
However, tag recognition may still have room for improvement...?🤔

Thank you.