getOverriddenSection function

FastStore Customizing sections and components Section override

The getOverriddenSection function lets you customize sections in your FastStore project without altering its core components and behavior. Instead, it returns a new React component representing the customized section.

This allows the creation of multiple overrides based on native components, enabling precise adjustments to specific parts of a section without affecting the rest.

Usage example

Imagine an Alert section with an icon. You want to make the icon bolder without changing anything else. getOverriddenSection allows you to target just the Icon component.


_23import { getOverriddenSection } from '@faststore/core';
_23import { AlertSection } from '@faststore/core';
_23import styles from './simple-alert.module.scss'
_23
_23const SimpleAlert = getOverriddenSection({
_23// Specify the original section to be overridden
_23Section: AlertSection,
_23// Add a class for potential styling (optional)
_23className: styles.simpleAlert,
_23// Define components to override within the section
_23components: {
_23    // Override the "Icon" component
_23    Icon: {
_23    // Change only the "props" of the Icon
_23    props: {
_23        // Set the "weight" prop to "bold"
_23        weight: "bold"
_23    }
_23    }
_23}
_23});
_23
_23export default SimpleAlert;

Instructions

Here's how you can use getOverriddenSection to customize sections within your FastStore project:

Import the getOverriddenSection from the @faststore/core package.
Import the native section from @faststore/core. In this example, we considered the AlertSection.
Define a new component using the getOverriddenSection function (e.g., SimpleAlert).
In the Section parameter of the getOverriddenSection function, specify the original section. Note that the getOverriddenSection uses the original AlertSection as the base for customization.
(Optional) Add a className for styling the section.
In the components parameter of the getOverriddenSection function, declare the components you wish to override (e.g., Icon).
Set the new props for the specified component. In this example, we overrode the weight prop to bold within the Icon's props.

Additional props can be applied to the overridden section. Refer to the List of native sections and overridable components to check the available props for each component.

Parameters

`override`

Define how to override the native section. This parameter can have the following properties:

Properties	Description
`Section`	React component representing the overridden section.
`components`	An object containing overrides for specific components within the section. The keys of this object should match the component names used in the section, and the values should be objects defining overrides for those components. For more details on overrides, refer to Overriding components props and Overriding a component.
`className`	Property that behaves similarly to React's `className`.