Share state between Astro Components

Tip

Using framework components? See how to share state between Islands!

When building an Astro website, you may need to share state across components. Astro recommends the use of Nano Stores for shared client storage.

Recipe

Section titled Recipe

1. Install Nano Stores:

   npm

   npm install nanostores

   pnpm

   pnpm add nanostores

   Yarn

   yarn add nanostores

2. Create a store. In this example, the store tracks whether a dialog is open or not:

   src/store.js

   import { atom } from 'nanostores';
   
   export const isOpen = atom(false);

3. Import and use the store in a <script> tag in the components that will share state.

   The following Button and Dialog components each use the shared isOpen state to control whether a particular <div> is hidden or displayed:

   src/components/Button.astro

   <button id="openDialog">Open</button>
   
   <script>
     import { isOpen } from '../store.js';
   
     // Set the store to true when the button is clicked
     function openDialog() {
       isOpen.set(true);
     }
   
     // Add an event listener to the button
     document.getElementById('openDialog').addEventListener('click', openDialog);
   </script>

   src/components/Dialog.astro

   <div id="dialog" style="display: none">Hello world!</div>
   
   <script>
     import { isOpen } from '../store.js';
   
     // Listen to changes in the store, and show/hide the dialog accordingly
     isOpen.subscribe(open => {
       if (open) {
         document.getElementById('dialog').style.display = 'block';
       } else {
         document.getElementById('dialog').style.display = 'none';
       }
     })
   </script>

Resources

Section titled Resources

• Nano Stores on NPM
• Nano Stores documentation for Vanilla JS