I'm customize the Astro Stone theme. I wanted to add a Gallery using the react component:
\`\`import React from 'react';
import ImageGallery from 'react-image-gallery';
import 'react-image-gallery/styles/css/image-gallery.css';
const images = \[
{
original: 'https://picsum.photos/id/1018/1000/600/',
thumbnail: 'https://picsum.photos/id/1018/250/150/',
},
{
original: 'https://picsum.photos/id/1015/1000/600/',
thumbnail: 'https://picsum.photos/id/1015/250/150/',
},
{
original: 'https://picsum.photos/id/1019/1000/600/',
thumbnail: 'https://picsum.photos/id/1019/250/150/',
},
\];
const Gallery = () =\> {
return \<ImageGallery items={images} /\>;
};
export default Gallery;\`
My package:
{
"name": "astro-theme-stone",
"type": "module",
"version": "1.0.0",
"scripts": {
"dev": "astro dev",
"start": "astro dev",
"build": "astro build",
"preview": "astro preview",
"astro": "astro"
},
"dependencies": {
"@alpinejs/collapse": "3.12.3",
"@astrojs/react": "^2.3.2",
"@astrojs/tailwind": "4.0.0",
"@fontsource/inter": "5.0.8",
"@types/alpinejs": "3.7.2",
"alpinejs": "3.12.3",
"astro": "2.10.13",
"astro-compress": "2.0.14",
"astro-icon": "^0.8.1",
"astro-imagetools": "^0.9.0",
"photoswipe": "^5.4.2",
"prettier": "3.0.2",
"prettier-plugin-astro": "0.12.0",
"prettier-plugin-tailwindcss": "0.5.3",
"probe-image-size": "^7.2.3",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-image-gallery": "^1.2.7",
"react-photo-album": "^2.3.0",
"react-responsive-carousel": "^3.2.23",
"react-simple-image-slider": "^2.4.1",
"simplelightbox": "^2.14.2",
"swiper": "^10.3.1",
"tailwindcss": "3.3.3",
"yet-another-react-lightbox": "^3.14.0"
},
"devDependencies": {
"@types/glob": "^8.1.0"
}
}
my astro config:
import { defineConfig } from 'astro/config';
import tailwind from '@astrojs/tailwind';
import compress from 'astro-compress';
import react from '@astrojs/react';
import { astroImageTools } from 'astro-imagetools';
// https://astro.build/config
export default defineConfig({
experimental: {
viewTransitions: true,
assets: true
},
integrations: \[tailwind(), compress(), react({ styles: true, client: 'esm' }), astroImageTools\]
});\`
I included Gallery component in astro file:
\`---
import Gallery from "./Gallery";
-
\<Gallery /\>\`
I see componet but dosent work.
What is possible problem?
I'm trying to display an image gallery using the react component in astro file using the Stone theme. Dosent Work my react componet by i I see it.
For "@astrojs/react": "^2.3.2", i got:
astro-theme-stone/src/components/pricing/Gallery.jsx No renderer installed for react. Try adding
@astrojs/react
to your project.