form-ramp-react

A React component library for seamless FormRamp form integration. This package provides a responsive, secure iframe-based component that automatically adjusts its height based on form content.

Installation

pnpm add form-ramp-react
# or
yarn add form-ramp-react
# or
npm install form-ramp-react

Peer Dependencies

This package requires React 19 or later:

{
  "react": "^19.0.0",
  "react-dom": "^19.0.0"
}

Usage

Basic Example

import { FormFrame } from 'form-ramp-react';

function App() {
  return (
    <div>
      <h1>Contact Us</h1>
      <FormFrame formId="your-form-id-here" />
    </div>
  );
}

With Custom Styling

import { FormFrame } from 'form-ramp-react';

function App() {
  return (
    <FormFrame
      formId="your-form-id-here"
      style={{
        maxWidth: '800px',
        margin: '0 auto',
        boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
      }}
      title="Contact Form"
      className="my-form-frame"
      id="contact-form"
    />
  );
}

TypeScript Support

The package includes full TypeScript definitions:

import { FormFrame, type FormFrameProps } from 'form-ramp-react';

// FormFrameProps is available for extending
interface CustomFormProps extends FormFrameProps {
  customProp?: string;
}

Development

Prerequisites

• Node.js 18+
• pnpm (recommended) or npm/yarn

Setup

# Install dependencies
pnpm install

# Run Storybook for development
pnpm dev

# Run tests
pnpm test

# Run tests in watch mode
pnpm test:watch

# Build the library
pnpm build:lib

# Lint code
pnpm lint

# Format code
pnpm format

License

ISC

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Support

For issues related to this library, please open an issue.

For FormRamp platform support, visit FormRamp documentation.