df-forms-preview-react
Advanced tools
A comprehensive React form preview component library with form controls, validation, and responsive design
A comprehensive React form preview component library with form controls, validation, and responsive design. This package provides a complete set of form components that can be used to build dynamic forms with real-time validation and conditional logic.
npm install df-form-preview-react
import React from 'react';
import { DfFormPreview, FormComponentType } from 'df-form-preview-react';
const formComponents: FormComponentType[] = [
{
id: 'name',
name: 'text-input',
basic: {
label: 'Full Name',
placeholder: 'Enter your full name',
defaultValue: ''
},
validation: {
required: true,
minLength: 2,
maxLength: 50
}
},
{
id: 'email',
name: 'email-input',
basic: {
label: 'Email Address',
placeholder: 'Enter your email',
defaultValue: ''
},
validation: {
required: true
}
}
];
function MyForm() {
const handleSubmit = (formData: FormComponentType[]) => {
};
const handleFormDataChange = (formData: FormComponentType[]) => {
return (
<DfFormPreview
formComponents={formComponents}
currentDevice="desktop"
isPreviewMode={false}
onSubmit={handleSubmit}
onFormDataChange={handleFormDataChange}
/>
);
}
The main form preview component that renders all form controls.
| Prop | Type | Default | Description |
|---|---|---|---|
formComponents | FormComponentType[] | [] | Array of form components to render |
currentDevice | 'desktop' | 'tablet' | 'mobile' | 'desktop' | Device type for responsive preview |
isPreviewMode | boolean | false | Whether the form is in preview mode (readonly) |
initialFormData | FormComponentType[] | [] | Initial form data with default values |
onSubmit | (formData: FormComponentType[]) => void | - | Callback when form is submitted |
onFormDataChange | (formData: FormComponentType[]) => void | - | Callback when form data changes |
Text, number, and email input fields.
{
id: 'username',
name: 'text-input', // or 'number-input', 'email-input'
basic: {
label: 'Username',
placeholder: 'Enter username',
defaultValue: ''
},
validation: {
required: true,
minLength: 3,
maxLength: 20
}
}
Multi-line text input.
{
id: 'description',
name: 'textarea',
basic: {
label: 'Description',
placeholder: 'Enter description',
defaultValue: ''
},
validation: {
required: true,
maxLength: 500
}
}
Dropdown selection.
{
id: 'country',
name: 'select',
basic: {
label: 'Country',
defaultValue: ''
},
options: [
{ label: 'United States', value: 'us' },
{ label: 'Canada', value: 'ca' },
{ label: 'United Kingdom', value: 'uk' }
],
validation: {
required: true
}
}
Checkbox inputs.
{
id: 'interests',
name: 'checkbox',
basic: {
label: 'Interests',
defaultValue: []
},
options: [
{ label: 'Technology', value: 'tech' },
{ label: 'Sports', value: 'sports' },
{ label: 'Music', value: 'music' }
],
validation: {
required: true
}
}
Radio button selection.
{
id: 'gender',
name: 'radio',
basic: {
label: 'Gender',
defaultValue: ''
},
options: [
{ label: 'Male', value: 'male' },
{ label: 'Female', value: 'female' },
{ label: 'Other', value: 'other' }
],
validation: {
required: true
}
}
Date and time inputs.
{
id: 'birthdate',
name: 'date',
basic: {
label: 'Birth Date',
defaultValue: ''
},
validation: {
required: true
}
}
Signature pad component.
{
id: 'signature',
name: 'signature',
basic: {
label: 'Digital Signature',
defaultValue: ''
},
validation: {
required: true
}
}
Heading component for form sections.
{
id: 'section-title',
name: 'heading',
basic: {
label: 'Personal Information',
level: 2
}
}
You can show/hide fields based on other field values:
{
id: 'has-phone',
name: 'checkbox',
basic: {
label: 'Do you have a phone number?',
defaultValue: false
},
options: [
{ label: 'Yes', value: 'yes' }
]
},
{
id: 'phone',
name: 'text-input',
basic: {
label: 'Phone Number',
placeholder: 'Enter phone number',
defaultValue: ''
},
conditional: {
showIf: {
fieldId: 'has-phone',
operator: 'equals',
value: 'yes'
}
}
}
The package uses CSS variables for theming. You can override these variables in your application:
:root {
--df-color-primary: #3b82f6;
--df-color-primary-hover: #2563eb;
--df-color-primary-disabled: #9ca3af;
--df-color-error-primary: #ef4444;
--df-color-success-primary: #10b981;
--df-color-text-dark: #1f2937;
--df-color-text-light: #6b7280;
--df-color-fb-container: #ffffff;
--df-color-fb-border: #e5e7eb;
--df-color-fb-bg: #f9fafb;
}
The package supports i18n through react-i18next. Make sure to set up your i18n configuration:
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
i18n
.use(initReactI18next)
.init({
resources: {
en: {
translation: {
'formBuilder.submit': 'Submit'
}
}
},
lng: 'en',
fallbackLng: 'en'
});
npm install
npm run build - Build the package for productionnpm run build:watch - Build and watch for changesnpm run dev - Development mode with watchnpm run clean - Clean the dist directorynpm run lint - Run ESLintnpm run type-check - Run TypeScript type checkingnpm run build
This will create the following files in the dist directory:
index.js - CommonJS buildindex.esm.js - ES modules buildindex.d.ts - TypeScript declarationsindex.css - Compiled CSSnpm login in your terminaldf-form-preview-react is available# Clean previous builds
npm run clean
# Build the package
npm run build
# Run type checking
npm run type-check
# Run linting
npm run lint
# Pack the package to test it
npm pack
# This creates a .tgz file that you can test locally
# Install it in a test project:
# npm install /path/to/df-form-preview-react-1.0.0.tgz
For Patch Version (1.0.0 → 1.0.1):
npm run publish:patch
For Minor Version (1.0.0 → 1.1.0):
npm run publish:minor
For Major Version (1.0.0 → 2.0.0):
npm run publish:major
Manual Publishing:
# Update version manually
npm version patch # or minor, major
# Publish
npm publish
npm install df-form-preview-react
npm packAuthentication Issues:
npm whoami # Check if you're logged in
npm login # Login if needed
Package Name Conflicts:
Build Issues:
npm run clean
rm -rf node_modules package-lock.json
npm install
npm run build
MIT License - see LICENSE file for details.
For issues and questions:
showCommentsInPreview prop for conditional comment displayFAQs
A comprehensive React form preview component library with form controls, validation, and responsive design
We found that df-forms-preview-react demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Multiple high-impact npm maintainers confirm they have been targeted in the same social engineering campaign that compromised Axios.
Security News
Axios compromise traced to social engineering, showing how attacks on maintainers can bypass controls and expose the broader software supply chain.
Security News
Node.js has paused its bug bounty program after funding ended, removing payouts for vulnerability reports but keeping its security process unchanged.