React SDK Guide
The @aerostack/react package provides a set of React Hooks and a Provider to easily integrate Aerostack services into your React applications.
Installation
npm install @aerostack/reactSetup
Wrap your application with the AerostackProvider to provide the SDK context to your components. Use your Project ID found in the Aerostack dashboard.
// src/main.tsx
import { AerostackProvider } from '@aerostack/react';
const config = {
projectId: 'proj_abc123',
baseUrl: 'https://api.aerostack.ai/v1'
};
ReactDOM.createRoot(document.getElementById('root')!).render(
<AerostackProvider projectId={config.projectId} baseUrl={config.baseUrl}>
<App />
</AerostackProvider>
);Hooks
useAuth
Manage user sessions, sign in, and registration.
import { useAuth } from '@aerostack/react';
function Profile() {
const { user, signIn, signOut, loading } = useAuth();
if (loading) return <div>Loading...</div>;
return user ? (
<div>
<p>Welcome, {user.name}</p>
<button onClick={signOut}>Sign Out</button>
</div>
) : (
<button onClick={() => signIn({ email: '[email protected]', password: '...' })}>
Sign In
</button>
);
}useAerostack (Custom Module Calls)
Invoke your server-side Logic Modules from the frontend. This is the recommended way to interact with your database and AI features from a React app.
import { useAerostack } from '@aerostack/react';
import { useState } from 'react';
function SearchComponent() {
const { sdk } = useAerostack();
const [results, setResults] = useState([]);
const handleSearch = async (query: string) => {
// Invoke a Logic Lab module named 'search-products'
const data = await sdk.call('search-products', { query });
setResults(data);
};
return (
// ... search UI
);
}Architectural Tip: For security and performance, frontend applications should use sdk.call() to trigger server-side Logic Modules. Direct database or cache access from the frontend is restricted to ensure your project’s data remains secure.
Security
On the client side, never use your Secret API Keys. The React SDK is designed to work with public endpoints that are secured by Project IDs and User Sessions.