New to Gatsby and can't get past this issue. I created a new page and on that page I want to change a value that is used in template file for the logo. On page 'my-mobile-app.js' I need to use the 'pulse' logo. Ive added it to the export default below but how do I call it from the specific page? Adding dark={true} to the <Img> changes it globally as expected. Let me know if this isn't clear.
This is the page structure:
my-mobiel-app.js (new page that needs to have a different logo than all others)
src/components/layout.js
src/components/Header/Header.js
And finally src/components/Logo.js has this code:
export default ({ white, dark, pulse, ...props }) => {
const logo = useStaticQuery(graphql`
query {
white: file(relativePath: { eq: "logo/Logo-whitebg.png" }) {
childImageSharp {
fluid {
...GatsbyImageSharpFluid_noBase64
}
}
}
dark: file(relativePath: { eq: "logo/Logo-darkbg.png" }) {
childImageSharp {
fluid {
...GatsbyImageSharpFluid_noBase64
}
}
}
pulse: file(relativePath: { eq: "logo/Logo-pulse.svg" }) {
childImageSharp {
fluid {
...GatsbyImageSharpFluid_noBase64
}
}
}
}
`)
}
const typeLogo = (white && 'white') || (dark && 'dark') || (pulse && 'pulse') || "white"
return <Link to="/">
<Img
fluid={logo[typeLogo].childImageSharp.fluid}
alt="Tradovate Logo"
{...props}
loading="eager"
fadeIn={false}
/>
</Link>
It's preferrable to export a named component (can be default) like:
export default function Logo ({ white, dark, pulse, ...props }) => {
const logo = useStaticQuery(graphql`
query {
white: file(relativePath: { eq: "logo/Logo-whitebg.png" }) {
childImageSharp {
fluid {
...GatsbyImageSharpFluid_noBase64
}
}
}
dark: file(relativePath: { eq: "logo/Logo-darkbg.png" }) {
childImageSharp {
fluid {
...GatsbyImageSharpFluid_noBase64
}
}
}
pulse: file(relativePath: { eq: "logo/Logo-pulse.svg" }) {
childImageSharp {
fluid {
...GatsbyImageSharpFluid_noBase64
}
}
}
}
`)
}
const typeLogo = (white && 'white') || (dark && 'dark') || (pulse && 'pulse') || "white"
return <Link to="/">
<Img
fluid={logo[typeLogo].childImageSharp.fluid}
alt="Tradovate Logo"
{...props}
loading="eager"
fadeIn={false}
/>
</Link>
Then wherever you want you just need to:
import Logo from '../path/to/your/brand/new/component'
<Logo white />
Change white or dark accordingly. I think it would be more clear if you create a boolean like isWhite or isDark and set it as default as true or false, whatever works for you like:
export default function Logo ({ isWhite=false, pulse, ...props }) => {}
In that way, you don't need to pass always a <Logo isWhite={false} /> because it's set as a default value to false. If you pass it like <Logo isWhite={true} /> will override the default configuration.