Astro Context

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

[![NPM Version][npm-img]][npm-url]
[![NPM Downloads][download-img]][download-url]
[![Open in StackBlitz][stackblitz-img]][stackblitz-url]

``bash
npm install @astropub/context
`

Usage

$3

Create a new context by importing createContext from the Astro Context library.

`ts
// src/context/sections.ts
import { createContext } from '@astropub/context'

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

$3

Wrap a component with a Provider to set its context.

`astro
---
// src/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
---










`

#### Accessing Context

Use getContext to access the current context in other components.

`astro
---
// src/components/Heading.astro
import { getContext } from '../context/section.ts'

const context = getContext()

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






`

$3

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

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

Title

This section uses a heading of level 1.

Heading

This section uses a heading of level 2.

Sub-Heading

This section uses a heading of level 3.

Sub-Sub-Heading

This section uses a heading of level 4.


`

This will produce the following HTML:

`html


Title

This section uses a heading of level 1.

Heading

This section uses a heading of level 2.

Sub-Heading

This section uses a heading of level 3.

Sub-Sub-Heading

This section uses a heading of level 4.


``

Enjoy!

[chat-url]: https://astro.build/chat
[docs-url]: https://github.com/astro-community/context

[npm-img]: https://img.shields.io/npm/v/@astropub/context?color=%23444&label=&labelColor=%23CB0000&logo=data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjE1MCAxNTAgNDAwIDQwMCIgZmlsbD0iI0ZGRiI+PHBhdGggZD0iTTE1MCA1NTBoMjAwVjI1MGgxMDB2MzAwaDEwMFYxNTBIMTUweiIvPjwvc3ZnPg==&style=for-the-badge
[npm-url]: https://www.npmjs.com/package/@astropub/context
[stackblitz-img]: https://img.shields.io/badge/-Open%20in%20Stackblitz-%231374EF?color=%23444&labelColor=%231374EF&logo=data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjEwIDggMTIgMTgiIGhlaWdodD0iMTgiIGZpbGw9IiNGRkYiPjxwYXRoIGQ9Ik0xMCAxNy42aDUuMmwtMyA3LjRMMjIgMTQuNGgtNS4ybDMtNy40TDEwIDE3LjZaIi8+PC9zdmc+&style=for-the-badge
[stackblitz-url]: https://stackblitz.com/github/astro-community/md
[bundlejs-img]: https://img.shields.io/badge/dynamic/json?url=https://bundlejs.com/api?q=@astropub/context&query=size.totalCompressedSize&color=%23444&labelColor=%233B82F6&label=&logo=data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA3MDAgNzAwIiBmaWxsPSIjRkZGIj4KCTxwYXRoIGQ9Ik0xNDYgMkExNzEgMTcxIDAgMCAwIDMgMTM5bC0yIDExdjQwMmwyIDExYzE1IDcyIDcxIDEyNSAxNDMgMTM2bDIwOSAxIDE5OS0xIDktMmM3MC0xNiAxMTktNjYgMTM0LTEzNWwyLTEwVjE1MGwtMi0xMkExNzEgMTcxIDAgMCAwIDU2MiAzbC0xMC0yLTE5OS0xQzE4NyAwIDE1MyAwIDE0NiAyem0xODEgMjUxdjM2bDctM2MxMy02IDMzLTkgNTAtNyA0MSA1IDcwIDM0IDgwIDc4IDIgMTIgMiA0MSAwIDUzLTUgMjItMTMgMzgtMjcgNTJhODIgODIgMCAwIDEtNjMgMjZjLTE1IDAtMTkgMC0yNS0yLTEwLTItMTctNi0yNC0xMGwtNS0zdjExaC00NVYyMTdoNTJ2MzZ6bTI5IDcxYy0yMCAzLTMyIDE5LTM1IDQ4LTMgMjUgMyA0OCAxNCA2MCA1IDYgMTMgMTAgMjMgMTEgMjUgNCA0NC05IDUxLTM2bDMtMTljMC0xNy0xLTI3LTctMzktOS0xOS0yNi0yOC00OS0yNXoiLz4KPC9zdmc+&style=for-the-badge
[bundlejs-url]: https://bundlejs.com/?bundle&q=@astropub/context
[download-url]: https://www.npmjs.com/package/@astropub/context
[download-img]: https://img.shields.io/badge/dynamic/json?url=https://api.npmjs.org/downloads/point/last-week/@astropub/context&query=downloads&label=⇓+week&color=%23444&labelColor=%23EEd100&style=for-the-badge