Overriding a native component

In this guide, you will learn how to override a native component to use a custom component.

The @faststore/core package provides a set of native sections. These native sections are made up of various components, each offering distinct functionalities. You can customize specific components within a native section or replace them entirely with alternative options that better align with your desired functionality or appearance. For example, you may want to modify the behavior of the Price component from the ProductDetails section to meet your business needs.

Before you start

Before you begin, make sure you have a functioning FastStore project.

Also, consider the following:

• This feature is experimental: The feature may not function as expected.

• Some sections contain multiple instances of the same component: When overriding a component or passing additional props to it, consider that all instances will be affected by this change.

Step by step

Step 1 - Setting up the overrides folder

1. Choose the native section to be customized from the list of available native sections.

2. Open your FastStore project in any code editor of your preference.

3. Go to the src folder and create the overrides folder.

4. In overrides, create a new file named after the chosen native section. For example, if you chose the ProductDetails section for customization, create a new file named ProductDetails.tsx under the src/components/overrides directory.

5. Copy and paste the following code snippet into the file:

import { SectionOverride } from '@faststore/core/src/typings/overrides'
 
const SECTION = 'ProductDetails' as const
 
const override: SectionOverride = { section: SECTION, components: {} }
 
export { override }

6. Save your changes.

Step 2 - Creating your custom component

1. Create a components folder in the src directory.
2. Inside the components folder, create a file named Price.tsx and add the following code:

import React from 'react'
import { Price as UIPrice, PriceProps } from '@faststore/ui'
 
export function Price(props: PriceProps) {
  return <UIPrice {...props} value={800}></UIPrice>
}

The code above imports the Price component and its props from the @faststore/ui package. It creates a Custom Price component that sets the value prop to 800. You can create any component as you wish.

Step 3 - Overriding the component

1. Choose a component to override from the list of overridable components for each native section. In this example, we are overriding the Price component.
2. Navigate to src/components/overrides that we've created in the previous step.
3. Open the ProductDetails.tsx file and update with the following code:

import { SectionOverride } from '@faststore/core/src/typings/overrides'
import { Price as CustomPrice } from '../Price'
 
const SECTION = 'ProductDetails' as const
 
const override: SectionOverride = {
  section: SECTION,
  components: {
    Price: { Component: CustomPrice },
  },
}
 
export { override }

This code imports the Custom Price component and overrides the native Price component in the ProductDetails section.

4. Run yarn dev in the terminal to start the development server. Access the provided localhost URL in your browser to see the updated Price component with the new valueprop set to 800: