Adding a component - XMPieLab/uStore-NG GitHub Wiki

Adding a component to the theme is possible as in any other React project. You will need to add a .js file with the component code to the src/components folder, under the existing folder hierarchy.

Write it as a function component. The theme's own components are function components, and React hooks cannot be used in class components.

You can also add styles to the component. It is recommended to place styles in a different .scss file which resides next to the component's file, and to import it from the component:

import './MyComponent.scss'

To use the component from a page or from another component, import it either by a relative path or through the $theme-components alias. The alias is useful when the importing file sits deep in the folder hierarchy, since it always resolves from the components root:

import MyComponent from '$theme-components/MyComponent'

Shared components that are not specific to this theme live in src/core-components and are imported through $core-components.

See Theme file structure for the full list of folder aliases.