Home

Head Hunter Frontend Wiki

Using module.css semantic expamles

Structure For Login component:

/PrimaryButton
  PrimaryButton.module.css
  PrimaryButton.tsx

PrimaryButton.tsx:

import classes from './PrimaryButton.module.css';

export const PrimaryButton = () => {
  return (
    // Most outer className should have name of module name!
    <button type="button" className={classes.PrimaryButton}>
      Button Title
    </button>
  );
};

PrimaryButton.module.css:

.PrimaryButton{
  border: 1px solid grey;
}

Semantic for naming interfaces

// props intereface should be named Props
interface Props {
  children: string;
}

export const PrimaryButton = ({ children}: Props) => {
  return (
    <button type="button">
      {children}
    </button>
  );
};