Astro Context

Astro Context is a library designed to simplify the creation and sharing of data across components in Astro.

npm install @astropub/context

Usage

Creating Context

Create new context using the createContext method.

/** @file ~/context/sections.ts */

import { createContext } from '@astropub/context'

const [ Provider, getContext ] = createContext<{ level: number }>()

Preparing a Provider

Wrap a component with a Provider to set its context.

---
/** @file ~/components/Section.astro */

import { Provider, getContext } from '../context/section.ts'

// set the current level to be 1 higher, or set it to 1
const level = (getContext()?.level + 1) || 1
---

<Provider level={level}>
  <section>
    <slot />
  </section>
</Provider>

Accessing Context

Use getContext to access the current context in other components.

---
/** @file ~/components/Heading.astro */

import { getContext } from '../context/section.ts'

const context = getContext()

// get the current level or 1
const level = getContext()?.level || 1
---

<h3 aria-level={level} {...Astro.props}>
  <slot />
</h3>

Example

Use these components to create nested sections with headings that dynamically update their levels based on the context.

---
import Section from '../components/Section.astro'
import Heading from '../components/Heading.astro'
---

<Section>
  <Heading>Title</Heading>
  <p>This section uses a heading of level 1.</p>
 
  <Section>
    <Heading>Heading</Heading>
    <p>This section uses a heading of level 2.</p>

    <Section>
      <Heading>Sub-Heading</Heading>
      <p>This section uses a heading of level 3.</p>

      <Section>
        <Heading>Sub-Sub-Heading</Heading>
        <p>This section uses a heading of level 4.</p>
      </Section>
    </Section>
  </Section>
</Section>

This will produce the following HTML:

<section>
  <h3 aria-level="1">Title</h3>
  <p>This section uses a heading of level 1.</p>

  <section>
    <h3 aria-level="2">Heading</h3>
    <p>This section uses a heading of level 2.</p>

    <section>
      <h3 aria-level="3">Sub-Heading</h3>
      <p>This section uses a heading of level 3.</p>

      <section>
        <h3 aria-level="4">Sub-Sub-Heading</h3>
        <p>This section uses a heading of level 4.</p>
      </section>
    </section>
  </section>
</section>

Enjoy!

Project Structure

Inside of this Astro project, you'll see the following folders and files:

/
├── demo/
│   ├── public/
│   └── src/
│       └── pages/
            ├── index.astro
│           └── ...etc
└── packages/
    └── context/
        ├── package.json
        └── ...etc

This project uses workspaces to develop a single package, @astropub/context.

It also includes a minimal Astro project, demo, for developing and demonstrating the component.

Commands

All commands are run from the root of the project, from a terminal:

Command	Action
npm install	Installs dependencies
npm run start	Starts local dev server at localhost:3000
npm run build	Build your production site to ./dist/
npm run preview	Preview your build locally, before deploying

Want to learn more? Read the Astro documentation or jump into the Astro Discord.