v 0.1.48

React Integration

The @ecopages/react package introduces first-class integration with React version 19, enabling developers to build dynamic components using the latest React features within the Ecopages platform.

Installation

bunx jsr add @ecopages/react

Usage

To enable React support, add the reactPlugin to your Ecopages configuration.

import { ConfigBuilder } from '@ecopages/core';
import { reactPlugin } from '@ecopages/react';

const config = await new ConfigBuilder()
	.setRootDir(import.meta.dir)
	.setBaseUrl(import.meta.env.ECOPAGES_BASE_URL)
	.setIntegrations([reactPlugin()])
	.build();

export default config;

Creating Components

You can standard React functional components. Ecopages uses the EcoComponent type to ensure compatibility.

import { useState } from 'react';
import type { EcoComponent } from '@ecopages/core';

export const Counter: EcoComponent = () => {
	const [count, setCount] = useState(0);

	return (
		<div className="flex gap-4 items-center">
			<p>Count: {count}</p>
			<button onClick={() => setCount(prev => prev - 1)}>-</button>
			<button onClick={() => setCount(prev => prev + 1)}>+</button>
		</div>
	);
};

Counter.config = {
	// Define any client-side dependencies here if needed
};

Using in Pages

Import your component and include it in your page. Don't forget to register it in the page's dependencies.

import { Counter } from '@/components/counter';
import { BaseLayout } from '@/layouts/base-layout';
import type { EcoComponent } from '@ecopages/core';

const HomePage: EcoComponent = () => {
	return (
		<BaseLayout>
			<h1>Welcome to React on Ecopages</h1>
			<Counter />
		</BaseLayout>
	);
};

HomePage.config = {
	dependencies: {
		components: [BaseLayout, Counter],
	},
};

export default HomePage;

Utilities

dynamic

Use the dynamic utility to lazy-load components or render them only on the client.

import { dynamic } from '@ecopages/react/utils/dynamic';

const HeavyComponent = dynamic(() => import('@/components/heavy-chart'), {
    ssr: false, // Defaults to true
    loading: () => <p>Loading chart...</p>
});

ClientOnly

The ClientOnly component is useful for parts of the UI that should strictly render in the browser (e.g., accessing window or localStorage).

import { ClientOnly } from '@ecopages/react/utils/client-only';

<ClientOnly fallback={<Spinner />}>
    <BrowserSpecificFeature />
</ClientOnly>

Key Features

MDX Support