SGERP Frontend

Using with React

Build React components with SGERP Collections

Interactive React Example

This is a live React component that uses the useSGERP hook with reactive collections. If you haven't connected yet, visit the Try It Out page first. Try It Out.

Project List Component

A simple list component that fetches and displays projects using reactive collections from useSGERP().

Loading projects...

Component Code

import { useState, useEffect } from 'react';
import { useSGERP } from 'sgerp-frontend-lib';

export function ProjectList() {
  const [loading, setLoading] = useState(true);
  const [loadingMore, setLoadingMore] = useState(false);

  const api = useSGERP();
  const projects = api?.collections.project;

  useEffect(() => {
    if (!projects) return;
    projects.fetch({ limit: 2 }).finally(() => setLoading(false));
  }, [api, projects]);

  if (loading) return <div>Loading...</div>;
  if (!projects || projects.isEmpty()) return <div>No projects</div>;

  return (
    <div>
      <h3>Projects ({projects.length})</h3>
      <p>{projects.hasMore ? 'More available' : 'All loaded'}</p>

      {projects.models.map(project => (
        <div key={project.id}>
          <h4>{project.name}</h4>
          <p>ID: {project.id}</p>
          <p>Timezone: {project.timezone}</p>
          <p>Status: {project.is_invalidated ? 'Inactive' : 'Active'}</p>
        </div>
      ))}

      {projects.hasMore && (
        <button
          onClick={() => {
            setLoadingMore(true);
            projects.fetchNext().finally(() => setLoadingMore(false));
          }}
          disabled={loadingMore}
        >
          {loadingMore ? 'Loading...' : 'Load More'}
        </button>
      )}
    </div>
  );
}

Using the useSGERP Hook

The library provides the useSGERP() hook that automatically connects to your active connection and returns reactive collections:

import { useSGERP } from 'sgerp-frontend-lib';

function MyComponent() {
  const api = useSGERP();
  const projects = api?.collections.project; // Already reactive!

  // Fetch data
  useEffect(() => {
    if (!projects) return;
    projects.fetch({ limit: 20 });
  }, [projects]);

  // Component automatically re-renders when data changes
  return (
    <div>
      {projects?.models.map(project => (
        <div key={project.id}>{project.name}</div>
      ))}
    </div>
  );
}

Key features:

  • Collections are automatically reactive using useSyncExternalStore
  • No need to manually call useCollection - it's built in
  • Automatically uses ConnectionManager to get your active connection
  • Component re-renders when you fetch, add, or remove models

Available Collections

  • api.collections.project - Project collection
  • api.collections.simulation - Simulation collection
  • api.collections.user - User collection
  • api.collections.projectmember - ProjectMember collection