@teranga-ds/react

Type-safe React wrappers for all 79 Teranga DS Web Components. Auto-generated from Stencil.js with full TypeScript support, proper event binding, and ref forwarding.

Installation

npm install @teranga-ds/react @teranga-ds/components

Setup

Import the global CSS once in your app entry point:

// main.tsx or App.tsx
import '@teranga-ds/components/teranga-ds.css';

Usage

import {
  TgButton,
  TgInput,
  TgKpiCard,
  TgDataTable,
  TgAiInsightCard,
  TgPromptInput,
} from '@teranga-ds/react';

export function Dashboard() {
  return (
    <>
      <TgKpiCard heading="Rendement" value="4.2" unit="t/ha" trend="up" trendValue="+12%" />
      <TgAiInsightCard
        heading="Conseil IA"
        insight="Augmentez l'irrigation de 15% cette semaine."
        confidence="0.91"
        variant="recommendation"
      />
      <TgDataTable columns={cols} rows={rows} selectable striped />
      <TgInput label="Rechercher" placeholder="Nom de parcelle…" onTgChange={handleSearch} />
      <TgPromptInput placeholder="Posez votre question…" onTgSubmit={handleAsk} />
      <TgButton variant="primary" onTgClick={handleSubmit}>Appliquer</TgButton>
    </>
  );
}

Available Components (79)

All components are exported as Tg* React components with full TypeScript props:

Forms: TgButton · TgInput · TgTextarea · TgSelect · TgCheckbox · TgRadio · TgSwitch · TgCombobox · TgMultiSelect · TgDatePicker · TgTimePicker · TgAutocomplete · TgOtpInput · TgSlider · TgStepperInput · TgRichEditor

Data: TgTable · TgDataTable · TgCard · TgBadge · TgTag · TgKpiCard · TgStatWidget · TgTimeline · TgActivityFeed · TgTreeView · TgKanbanBoard · TgCalendarView · TgExpandableRow · TgHeatmap

Navigation: TgNavbar · TgSidebar · TgBreadcrumb · TgPagination · TgTabs · TgMegaMenu · TgCommandPalette · TgContextMenu · TgBottomNav · TgStepper · TgWizardNav · TgQuickSwitcher

Feedback: TgAlert · TgToast · TgModal · TgSpinner · TgSkeleton · TgProgress · TgTooltip · TgEmptyState · TgConfirmDialog · TgUndoSnackbar · TgStatusBadge · TgRetryUi

AI: TgChatMessage · TgStreamingResponse · TgPromptInput · TgConfidenceBadge · TgModelSelector · TgAiInsightCard · TgAiFeedback · TgSourceCitation · TgTokenUsage

Media: TgAudioPlayer · TgVideoPlayer · TgImageGallery · TgFileUpload

Real-time: TgLiveBadge · TgPresenceIndicator · TgActivityStream

Security: TgLoginForm · TgRoleBadge · TgSessionExpired · TgAvatar

Mobile: TgBottomSheet · TgFab · TgPullToRefresh · TgGlobalLoader · TgChat

Events

Stencil events are mapped to React on* callbacks:

<TgButton onTgClick={(e) => console.log('clicked', e.detail)}>Click</TgButton>
<TgInput onTgChange={(e) => setValue(e.detail)} />
<TgPromptInput onTgSubmit={(e) => askAI(e.detail)} />

Peer Dependencies

• react >= 17.0.0
• react-dom >= 17.0.0

License

MIT © Teranga DS Contributors

License

MIT © République du Sénégal