For detailed instructions on overriding components, refer to Overriding native component’s props and Overriding a native component.

• The native Alert section provides an icon prop for customization. It only accepts predefined icons, but you want more control and flexibility over the displayed content.
• You want to display a custom image as the icon alongside the text in your alert messages.

1. In the src/components/sections folder, create the folder AlertWithImage folder.
2. In the AlertWithImage folder, create the AlertWithImage.tsx file.
3. Import the following to the AlertWithImage.tsx file:
   
   

   _10

   import { getOverriddenSection } from "@faststore/core";

   _10

   import Image from "next/image";

   _10

   import { useMemo } from "react";

   
   
4. Define the AlertWithImageProps interface:
   
   

   _10

   import { getOverriddenSection } from "@faststore/core";

   _10

   import Image from "next/image";

   _10

   import { useMemo } from "react";

   _10

   _10

   interface AlertWithImageProps

   _10

   extends Omit<React.ComponentProps<typeof AlertSection>, "icon"> {

   _10

   src: string;

   _10

   alt: string;

   _10

   }

   
   
   • This interface defines the props accepted by the AlertWithImage component.
   • It inherits all props from the native Alert component, excluding the icon prop, which we intend to replace with an image.
   • It adds a new prop named src, which specifies the image source URL.
5. Create the AlertWithImage component:
   
   

   _36

   import { useMemo } from "react";

   _36

   import { AlertSection, getOverriddenSection } from "@faststore/core";

   _36

   import { Image_unstable as Image } from "@faststore/core/experimental";

   _36

   _36

   interface AlertWithImageProps

   _36

   extends Omit<React.ComponentProps<typeof AlertSection>, "icon"> {

   _36

   src: string;

   _36

   alt: string;

   _36

   }

   _36

   _36

   export default function AlertWithImage(props: AlertWithImageProps) {

   _36

   const { src, alt, ...otherProps } = props;

   _36

   _36

   const OverriddenAlert = useMemo(

   _36

   () =>

   _36

   getOverriddenSection({

   _36

   Section: AlertSection,

   _36

   className: styles.alertWithImage,

   _36

   components: {

   _36

   Icon: {

   _36

   Component: () => (

   _36

   <Image

   _36

   src={props.src}

   _36

   alt={props.alt}

   _36

   width={24}

   _36

   height={24}

   _36

   />

   _36

   ),

   _36

   },

   _36

   },

   _36

   }),

   _36

   []

   _36

   );

   _36

   _36

   return <OverriddenAlert {...otherProps} icon="" />;

   _36

   }

   
   
   • This function receives the AlertWithImageProps.
   • It destructures the src prop containing the image source and remaining props using the spread operator (...otherProps).
   • The core functionality lies within the useMemo hook.
     • It defines the OverriddenAlert constant using getOverriddenSection.
     • The override options specify:
       • Section: The section to be overridden (Alert).
       • components: An object containing the override for the Icon component.
   • Inside the Icon override:
     • Component: A function returning an Image component. This displays the image specified by the src prop.
     • width and height: Optional props to set the size of the image.
   • The use of useMemo ensures this override is only created once, improving performance.
   • The function returns the OverriddenAlert component, spreading the otherProps and setting the icon prop to noop (effectively disabling the default icon behavior).

   For further details on code implementation, see the AlertWithImage folder available in the playground.store repository.

6. Add the section to the Headless CMS by following the instructions available in syncing components to the Headless CMS.
   The following schema was used as an example in cms/faststore/sections.json:
   
   

   _45

   [

   _45

   {

   _45

   "name": "AlertWithImage",

   _45

   "schema": {

   _45

   "title": "Alert with image",

   _45

   "description": "Add an Alert that has an Image as an icon",

   _45

   "type": "object",

   _45

   "required": [

   _45

   "src",

   _45

   "content",

   _45

   "dismissible"

   _45

   ],

   _45

   "properties": {

   _45

   "src": {

   _45

   "type": "string",

   _45

   "title": "Image source",

   _45

   "description": "Source of the Alert icon image"

   _45

   },

   _45

   "content": {

   _45

   "type": "string",

   _45

   "title": "Content"

   _45

   },

   _45

   "link": {

   _45

   "title": "Link",

   _45

   "type": "object",

   _45

   "properties": {

   _45

   "text": {

   _45

   "type": "string",

   _45

   "title": "Link Text"

   _45

   },

   _45

   "to": {

   _45

   "type": "string",

   _45

   "title": "Action link"

   _45

   }

   _45

   }

   _45

   },

   _45

   "dismissible": {

   _45

   "type": "boolean",

   _45

   "default": false,

   _45

   "title": "Is dismissible?"

   _45

   }

   _45

   }

   _45

   }

   _45

   }

   _45

   ]

   
   

For further details on code implementation, see the sections.json file available in the playground.store repository.

• Before
  The native Alert displays one of the default icons, the BellRinging, following the sentence Get 15% off today: NEW15! Buy now.
  
• After
  The native Alert was replaced with the custom one, which features a pink image in the form of an icon added through Headless CMS.