EC React Components
@socotra/ec-react-components is a powerful, schema-driven framework
for building enterprise-grade insurance applications. This library
provides a comprehensive suite of dynamic forms and UI components
designed to accelerate development and handle the full spectrum of
policy lifecycle operations with unparalleled flexibility.
Core Philosophy
At its core, this library is engineered to translate Socotra’s flexible data model directly into a rich, interactive user interface. By leveraging your unique data model, we dynamically generate complex forms, eliminating the need to manually build and maintain forms for every product or data variation. This schema-driven approach ensures that as your insurance products evolve, your UI adapts automatically, dramatically reducing development overhead and increasing speed to market.
Our components are built with modern, robust technologies including React, TypeScript, Shadcn UI, and Tailwind CSS, ensuring a developer-friendly, performant, and highly customizable experience.
Key Features
Schema-Driven UI: Forms for quotes, policies, accounts, and transactions are generated dynamically from your data model, not hardcoded.
Complex Logic Handling: Built-in support for sophisticated insurance workflows, including constraint evaluation for real-time field dependency updates.
Highly Customizable: A powerful
tagsystem allows for deep customization of field behavior directly from the data model—from conditional visibility to special UI controls like multi-select and currency inputs.Enterprise-Ready: Designed to handle the intricate details of policy administration, including endorsements, payments, disbursements, and renewals.
Modern Tech Stack: A clean, modern, and performant codebase that is a pleasure to work with and extend.
Installation
npm i @socotra/ec-react-components
Component Documentation
Dive into the detailed documentation for our core components to understand their purpose, props, and advanced capabilities.
Core Forms
Component |
Description |
|---|---|
AccountForm |
A dynamic form for creating and updating customer accounts based on configurable account types. |
QuoteForm |
The cornerstone of the quoting process. A comprehensive, multi-section form for creating and updating quotes with full support for constraint evaluation. |
PolicyForm |
A specialized, read-only view for displaying the complete data of an issued policy in a structured format. |
ElementForm |
A versatile and powerful form for rendering any sub-element of a policy or quote, such as a vehicle, driver, or location. |
PaymentForm |
A suite of components for handling all payment-related actions: creating new payments, applying existing credit, and reversing transactions. |
DisbursementForm |
A specialized form for processing disbursements from an account, with dynamic fields based on disbursement type. |
Transaction Forms
These forms are used for handling changes to policies post-issuance (endorsements, renewals, etc.).
Component |
Description |
|---|---|
InitializedTransactionForm |
Handles transactions in an
|
DraftTransactionForm |
A specialized form for midterm
policy changes. It generates the
necessary |
Theming
To style the components, follow the instructions in the theming guide.
shadcn/ui - CSS Imports from the
package - Per-Component Style OverridesDocumentation
The documentation for this package is generated from a script that must be run after the package is built.
To contribute to the documentation, clone the repo and run the following command:
git clone https://github.com/socotra/ec-react.git
cd ec-react/packages/docs/src/components
Edit files under the components directory.
Run pnpm run sync to update the documentation in the README.md
files of the other packages.
Follow instructions in the ec-react/packages/docs/README.md file to
build the documentation and update the Socotra Documentation repo.