custom gatsby fluid image hook comp & implementation

BackgroundImageContainer.jsx

/** @jsx jsx */
import { jsx } from "theme-ui"
import React from "react"
import { graphql, useStaticQuery } from "gatsby"
import styled from "@emotion/styled"
import BackgroundImage from "gatsby-background-image"
import useBackgroundImage from "./useBackgroundImage"

const BackgroundImageContainer = ({ className }) => {
  const data = useBackgroundImage()
  return (
    <div>
      <BackgroundImage
        Tag="section"
        className={className}
        fluid={data}
        backgroundColor={`#040e18`}
      >
        <h1>From the comp</h1>
      </BackgroundImage>
    </div>
  )
}

export default BackgroundImageContainer

both the independent custom hook and then example of hook used in comp

‎‎​

useBackgroundImage.jsx

/** @jsx jsx */
import { jsx } from "theme-ui"
import React from "react"
import { graphql, useStaticQuery } from "gatsby"
import styled from "@emotion/styled"

const useBackgroundImage = () => {
  const data = useStaticQuery(graphql`
    query FluidBackgroundImage {
      file(relativePath: { eq: "gatsby-astronaut.png" }) {
        childImageSharp {
          fluid {
            base64
            aspectRatio
            src
            srcSet
            sizes
          }
        }
      }
    }
  `)

  return data.file.childImageSharp.fluid
}

console.log(useBackgroundImage)

export default useBackgroundImage