Skip to content
Astro Utils

Context

Save context between components.

Allow you to add extra props without the need to manually add them every time.

Installation

Install the package by running

Terminal window
npm install @astro-utils/context

Usage

layouts/Layout.astro

---
import Context from '@astro-utils/context/Context.astro';


function consoleIt(){
    console.log('Hi');
}
---
<Context title="Context is cool" consoleIt={consoleIt}>
    <slot/>
</Context>

components/LayoutTitle.astro

---
import getContext from '@astro-utils/context';


const {title, consoleIt} = getContext(Astro);
consoleIt();
---
<h2>{title}</h2>

pages/index.astro

---
import Layout from '../layouts/Layout.astro';
import LayoutTitle from '../components/LayoutTitle.astro';
---
<Layout>
    <LayoutTitle/>
</Layout>

Functions

// if you are module/lib, change the name accordingly
function getContext(astro: AstroGlobal, name = "default"): {[key: string]: any}

Every new context inherit the last one

async function asyncContext<T>(promise: () => Promise<T>, astro: AstroGlobal, { name = "default", context = astro.props}): Promise<T>

Same as Context.astro, help you render astro inside the props context

Example

const htmlSlot = await asyncContext(() => Astro.slots.render('default'), Astro, {name: "default"});