How to extend shadowed files in Gatsby

Gatsby is a React-based, open-source framework for creating websites and apps that is basically a static site generator. Gatsby will produce static HTML files that can be loaded onto a server.

Gatsby themes are plugins that include a gatsby-config.js file and add pre-configured functionality, data sourcing, and/or UI code to Gatsby sites.

Shadowing in gatsby themes

Gatsby themes allow shadowingallows a user to replace any file implemented in the webpack bundle from the src directory, which applies to many React components, JSON files, pages, Typescript files, and other imported files.

Shadowing is commonly used to customize the bio component in gatsby.

Extending shadowed files in Gatsby

Users can easily import a component to be shadowed and then render it. This is very useful to users as they don’t have to manually copy the entire implementation of the component from the theme, and shadowing is straightforward and easy to implement. It can also be utilized in a specific situation where a user may want to wrap a component or pass a different prop without worrying about the component’s internals.

For example, consider a situation where a user has a custom component, and the user wants to wrap the author’s bio in the custom ABC component.

Look at implementation below:

import React from "react"
import { MediaObject, Icon } from "gatsby-theme-blog"
import ABC from "../components/abc_component"

export default function Bio({ name, bio, address, phonenumber, LinkedInURL}) {
  return (
    <ABC>
      <MediaObject>
          <h3>{name}</h3>
          <p>{bio}</p>
          <p>phonenumber</p> 
          <a href={LinkedInURL}>
            <Icon name="linkedin" />
          </a>
          <a href={address}>
            <Icon name="ADDRESS" />
          </a>
        </div>
      </MediaObject>
    </ABC>
  )
}