Creating components

When building your UI with GamefaceUI, you may want to split your code into reusable custom components. To facilitate this, the GamefaceUI boilerplate includes a dedicated folder for custom components. It is recommended to place your custom components in this folder.

Guidelines for creating custom components

The steps outlined below are not mandatory for creating custom components but are recommended as they follow a structured approach and enable features like alias imports.

To create a new component, use the /src/custom-components folder.

Tip

For better organization, it is recommended to create a subfolder named with the view name where the component will be used inside the /src/custom-components folder, for instance - /src/custom-components/Hud/MyCustomComponent. While you can place components directly in the custom-components folder, this is not advised. Refer to our boilerplate template for more details on the folder structure.

Example

Let’s create a TopBar component for the Hud view.

1. Create a folder for the view where the component will be used. For this example, create /src/custom-components/Hud.

2. Inside this folder, create another folder for the component: /src/custom-components/Hud/TopBar.

3. Set up the component’s source files in this folder:

   1. Create a TopBar.tsx file for the component’s logic and functionality.

   2. Create a TopBar.module.css file for the component’s styles.

4. Add styles to the TopBar.module.css file:

   .testClass {
           color: red;
   }

   At this point, your file structure should look like this:

   • Directorysrc

     • Directorycustom-components

       • DirectoryHud

         • DirectoryTopBar

           • TopBar.tsx
           • TopBar.module.css
     • Directoryviews

       • Directoryhud

         • Hud.tsx
         • …
   • …

5. Import the styles as a module in the TopBar.tsx file and apply them using the CSS module syntax: class={styles.testClass}.

   /src/custom-components/Hud/TopBar/TopBar.tsx

   import styles from './TopBar.module.css'
   
   const TopBar = () => {
           return <div class={styles.testClass}></div>
   }

6. Once your component is ready, you can use it in your view. For example, to use TopBar in the Hud view, import it as shown below:

   /src/views/hud/Hud.tsx

   import TopBar from '@custom-components/TopBar/TopBar';
   
   const Hud = () => {
           return <TopBar />;
   }