​
Utilizing Predefined Components

Consistency and maintainability are key in any React application, and one effective way to achieve these is through the use of predefined components. Before creating a new component, always explore the existing component library to find a suitable match for your needs.

​
Text Components

For textual content, there’s a suite of predefined components tailored for different contexts and semantic meanings, such as TitleText, HeadlineText, RunningText, SmallText, and more. These components ensure consistent styling and behavior across the application. 
<HeadlineText>
  {headlineContent}
</HeadlineText>

<SmallText>
  {detailContent}
</SmallText>
  • Best Practice: Always opt for the appropriate predefined text component to ensure a cohesive look and feel across your application.

​
Input Components

For form inputs, predefined components like OutlinedTextInput, FilledTextInput, and others come with built-in styles and functionalities, such as validation. 
<OutlinedTextInput
  className="mt-15"
  type="email"
  placeholder={t("auth.email")}
  // other props like ref and validationMessage
/>
  • Best Practice: Utilize predefined input components for uniformity and to leverage built-in validation functionalities.

​
Loading Components

Skeleton components like RunningTextSkelton provide placeholders during content loading, maintaining a seamless user experience. 
<RunningTextSkelton className="loading-placeholder" />
  • Usage: Implement skeleton components as placeholders while content is being fetched or processed.
By adhering to these practices, developers can ensure a uniform and maintainable codebase, making it easier to update and manage over time. Always refer to the component library documentation for details on available components and their usage.