Embedded React SDK Guide

Installation

Install the `@nexorasoft/nexoraforms-react` dependency inside your client project directory:

Basic Integration

Import the `NexoraForms` component and pass the `accessKey` generated in your dashboard. The component automatically handles fetching schema configurations, rendering fields, validation, and submission hooks.

import React from 'react';
import { NexoraForms } from '@nexorasoft/nexoraforms-react';

export default function MyFormPage() {
  return (
    <div style={{ maxWidth: '600px', margin: '40px auto' }}>
      <NexoraForms accessKey="nexa_your_form_access_key" />
    </div>
  );
}

Theme Customization

Nexoraforms is styled using dynamic CSS variables mapped directly to your properties. Passing a `theme` object overrides defaults cleanly:

import React from 'react';
import { NexoraForms } from '@nexorasoft/nexoraforms-react';

export default function StyledFormPage() {
  const customTheme = {
    primaryColor: '#9333ea',          // Buttons, progress steps, focus rings
    backgroundColor: '#000000',       // Form container/surface background
    textColor: '#ffffff',             // Labels, descriptions, and primary text
    placeholderColor: '#6b7280',      // Input placeholder text color

    inputBgColor: '#000000',          // Input background
    inputTextColor: '#ffffff',        // Input value text color
    inputBorderColor: '#292b31',      // Input outline/border color

    buttonBgColor: '#ffffff',         // Submit button background
    buttonTextColor: '#000000',       // Submit button text color
    
    componentBorderColor: '#292b31',  // Divider and layout borders
  };

  return (
    <NexoraForms 
      accessKey="nexa_your_form_access_key" 
      theme={customTheme}
    />
  );
}/* eslint-disable-line */

Section Breaks & Steps

When designing a form inside our visual builder, adding a **Section Break** field automatically groups the preceding and following inputs into multi-step pages.

The React SDK handles this automatically, shifting the layout from a scrolling list to a wizard experience containing **Back** and **Next Page** navigation buttons, alongside an animated progress indicator.

Conditional logic

Customize visibility patterns for questions. Fields can listen to previous values dynamically. For instance, show a "Business details" field ONLY if a previous checkbox selection is set to "Corporate Client".

Evaluations are performed instantly inside the React client model, hiding or displaying relevant form steps in real-time.

Custom Script Validations

For complex validations (e.g. checking if a rating is above 3 when feedback is provided, or validating regex formats), you can write custom validations using JavaScript expression rules inside the form options.