Usage with Astro

How to use the library with Astro

Create a new Astro project

Run the following command:

bash

npm create astro@latest

Select the default options:

bash

 astro   Launch sequence initiated.
 
   dir   Where should we create your new project?
         ./astro-project
 
  tmpl   How would you like to start your new project?
         Include sample files
 
    ts   Do you plan to write TypeScript?
         Yes
 
   use   How strict should TypeScript be?
         Strict
 
  deps   Install dependencies?
         Yes
 
   git   Initialize a new git repository?
         Yes
 
      ✔  Project initialized!
         ■ Template copied
         ■ TypeScript customized
         ■ Dependencies installed
         ■ Git initialized

Add @astrojs/react integration:

bash

npx astro add react

Add the library

Run the following command:

bash

Add the JsonViewer to the page file:

💡 Add client:load directive to the JsonViewer component.

// 📄 pages/index.astro
 
---
 
import { JsonViewer } from '@franmella/json-viewer';
 
---
 
<main>
    <JsonViewer client:load />
</main>

Pass the JSON data to the JsonViewer component:

// 📄 pages/index.astro
 
---
 
import { JsonViewer } from '@franmella/json-viewer';
 
const json = {
  name: 'John Doe',
  age: 30,
  email: "test@test.com",
  address: {
    street: '123 Main St',
    city: 'New York',
    state: 'NY',
    zip: '10001'
  }
}
 
---
 
<main>
    <JsonViewer client:load data={json} />
</main>