smart-form-react v1.0.1

smart-form-react

A flexible dynamic form builder for React that supports both normal CSS and Material UI styling. Easily create forms that cater to your design preferences while maintaining accessibility and usability.

Table of Contents

• Installation
• Usage
• Features
• Example
• Documentation
• Contributing
• License

Installation

To install the package, run the following command:

npm install smart-form-react

## Usage

To use the smart-form-react package, import the FormPreview component into your React application. You can toggle between normal CSS and Material UI styling using the useMaterialUI prop.

## Example

import React from 'react';
import { FormPreview } from 'smart-form-react';

const fields = [
  { id: 'name', type: 'text', label: 'Name', required: true, placeholder: 'John Doe' },
  { id: 'email', type: 'email', label: 'Email', required: true, placeholder: 'example@example.com' },
];

const App = () => {
  return (
    <div>
      <h1>Dynamic Form Example</h1>
      <FormPreview fields={fields} useMaterialUI={true} />
    </div>
  );
};

export default App;

## Features

Flexible Styling Options: Choose between normal CSS and Material UI for styling your forms.
Accessibility: Built-in support for labels, titles, and placeholders to enhance usability.
Dynamic Field Rendering: Easily render different types of fields based on your configuration.

## Documentation

### Component Props

fields: An array of field objects that define the form structure. Each field object should have the following properties:
id: A unique identifier for the field.
type: The type of input (e.g., 'text', 'email').
label: The label displayed for the input field.
required: A boolean indicating if the field is mandatory.
placeholder: (Optional) A placeholder text for the input field.
useMaterialUI: A boolean that determines whether to use Material UI styling. Default is false.

### Accessibility
The package ensures that all form elements are accessible by:

Providing <label> elements for inputs.
Including title and placeholder attributes for better user guidance.

## Contributing

Contributions are welcome! If you'd like to contribute to the project, please follow these steps: 

1. Fork the repository.
2. Create a new branch (git checkout -b feature/YourFeature).
3. Make your changes and commit them (git commit -m 'Add some feature').
4. Push to the branch (git push origin feature/YourFeature).
5. Open a pull request.