@nexorasoft/nexoraforms-react

An elegant, drop-in React component to easily embed your NexoraForms inside any React application.

It handles fetching the form structure, validation, submission, styling customization, and rendering automatically using a secure Shadow DOM to prevent any styling collisions with your host application.

Installation

Install the package via npm, yarn, or pnpm:

# npm
npm install @nexorasoft/nexoraforms-react

# yarn
yarn add @nexorasoft/nexoraforms-react

# pnpm
pnpm add @nexorasoft/nexoraforms-react

Basic Usage

Simply import the NexoraForms component and pass your form's unique accessKey.

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

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

export default App;

Features & Configuration

1. Show/Hide Header Elements

By default, the form title and description are shown. You can toggle their visibility using the isTitleVisible and isDescriptionVisible props:

<NexoraForms 
  accessKey="nexa_your_form_access_key"
  isTitleVisible={false}        // Hide the form title
  isDescriptionVisible={false}  // Hide the form description
/>

2. Full Theme Customization

Match the form precisely to your application's design system (dark mode, light mode, or custom color scheme) by passing a theme object.

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

function App() {
  const customTheme = {
    // Colors
    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

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

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

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

Props Reference

| Prop Name | Type | Required | Default | Description | | :--- | :--- | :---: | :--- | :--- | | accessKey | string | Yes | — | The unique access key generated for the form inside your NexoraForms console. | | isTitleVisible | boolean | No | true | Show or hide the main form title header. | | isDescriptionVisible | boolean | No | true | Show or hide the form description header. | | theme | object | No | — | Configuration object for styling the form elements. |

theme Object Properties

| Property Name | Type | Default | Description | | :--- | :--- | :--- | :--- | | primaryColor | string | '#6366f1' | Primary color for interactive elements, focus states, and progress indicators. | | backgroundColor | string | '#f9fafb' | Background color of the outer form container. | | textColor | string | '#111827' | Text color for labels, headings, and description blocks. | | componentBorderColor | string | '#e5e7eb' | Border color for internal containers and layout elements. | | inputBorderColor | string | '#e5e7eb' | Default border/outline color of input elements. | | inputBgColor | string | '#ffffff' | Background color for form input fields. | | inputTextColor | string | '#111827' | Value text color inside input fields. | | placeholderColor | string | — | Text color for input field placeholders. | | buttonBgColor | string | '#6366f1' | Background color of the main submit button. | | buttonTextColor | string | '#ffffff' | Text color of the main submit button. |

Key Design Highlights

• Isolated Styles (Shadow DOM): Embedded inside a secure Shadow DOM wrapper. Your host application styles will not bleed into the form, and the form's styles won't break your site.
• Multistep Support (Section Breaks): Splitting forms with section breaks automatically converts the form into a polished, responsive multi-step wizard.
• Dynamic Field Logic: Supports field-level conditional logic and validation rules in real-time.
• Rich Media & File Uploads: Integrated file uploader supporting file size and format validation automatically.
• Micro-Animations: Fluid layout and status transitions powered by lightweight styling structures.

License

MIT © Nexorasoft