NOTE: This approach may not work in all Astro versions. Consider using a separate config.mjs file instead of importing from astro.config.mjs.

I had the need to have a global flag on my site, and when that flag was true I wanted to display something. If false, I wanted that information to be hidden, on multiple page components.

So, a single flag to change how the site looked.

Here’s what I did.

I put that flag in astro.config.mjs

export default /** @type {import('astro').AstroUserConfig} */ ({
  renderers: ['@astrojs/renderer-react'],
  devOptions: {
    tailwindConfig: './tailwind.config.cjs',
  },
  signupsOpen: false,
})

Note the last entry signupsOpen. That’s the one I added.

Then I referenced that value in every component I wanted to use it.

Something like this:

---
import Config from '../../astro.config.mjs'
---

<div>
  {Config.signupsOpen && <p>flag is true</p>}
</div>

Lessons in this unit:

0:	Introduction
1:	Your first Astro site
2:	The structure of an Astro site
3:	Astro components
4:	Adding more pages
5:	Building composable layouts
6:	Astro Props
7:	CSS in Astro
8:	JavaScript in Astro
9:	▶︎ Access configuration values in components
10:	Astro, when to use .astro or .ts files