@avarock/react-form

A lightweight, customizable React + TypeScript library for building dynamic forms with SCSS-based styling.

Installation

Install the package via npm:

1npm i @avarock/react-form

Features

• Pre-styled, customizable form and input components.
• Supports both browser-based and in-built form validation.
• Custom themes (light and dark).
• Flexible styling with support for className and style props.

Usage

Here’s an example of how to use the components:

1import {
2  Form,
3  InputText,
4  InputTextAnimated,
5  InputSelect,
6  InputTextArea,
7  InputCheckBox,
8  InputRadio,
9} from "@avarock/react-form";
10import "@avarock/react-form/dist/styles.css";
11
12function App() {
13  function handleSubmit(formState: Record<string, any>) {
14    console.log(formState);
15  }
16
17  return (
18    <div>
19      <Form
20        style={{ gridTemplateColumns: "1fr 1fr", maxWidth: "40rem" }}
21        onSubmit={handleSubmit}
22        theme="light"
23        HTMLValidate={false}
24        showSubmitBtn={true}
25      >
26        <InputText
27          label="Name"
28          name="name"
29          placeholder="Enter your name"
30          required
31        />
32        <InputText
33          label="Age"
34          name="age"
35          placeholder="Enter your age"
36          type="number"
37          required
38        />
39        <InputTextAnimated type="email" label="Email" name="email" required />
40        <InputTextAnimated
41          type="password"
42          label="Password"
43          name="password"
44          required
45        />
46        <InputSelect
47          label="City"
48          name="city"
49          options={[
50            { label: "Jaipur", value: "jaipur" },
51            { label: "Mumbai", value: "mumbai" },
52            { label: "Hyderabad", value: "hyderabad" },
53          ]}
54          initialOptionLabel="Select City"
55          required
56        />
57        <InputTextArea
58          label="Bio"
59          name="bio"
60          placeholder="Enter your bio"
61          maxLength={80}
62          required
63        />
64        <InputCheckBox
65          style={{ alignSelf: "end" }}
66          label="Allow Cookies"
67          name="isCookieEnabled"
68        />
69        <InputRadio
70          name="gender"
71          label="Gender"
72          options={[
73            { label: "Male", value: "male" },
74            { label: "Female", value: "female" },
75            { label: "Other", value: "other" },
76          ]}
77          required
78        />
79      </Form>
80    </div>
81  );
82}
83
84export default App;

Styling

• Import the library styles:

  1import "@avarock/react-form/dist/styles.css";

• You can also use the className or style props to apply custom styles.

Reference

Form

• Props:
  • style: Inline styles for custom layout.
  • onSubmit(formState: Record<string, any>): Callback function triggered on form submission with form data.
  • HTMLValidate: Enable browser-based validation (true) or use the library's validation (false).
    Note: Currently, library validation only supports required, type="email", and type="password".
  • showSubmitBtn: Show/hide the submit button.
  • theme: Choose between "light" and "dark" themes.
  • Custom submit button or other elements can be passed as children.

---

InputText

• Props:
  • name (required): Register the field in the form.
  • label (required): Display field label.
  • type: "text" | "password" | "email" | "number". Default: "text".
  • togglePasswordVisibility: Show/hide toggle button for password visibility (if type="password").
  • Any valid HTMLInputElement attributes.

---

InputTextAnimated

• Similar to InputText with the following differences:
  • No placeholder prop (uses animation instead).
  • Styles for transition and animation.

---

InputSelect

• Props:
  • name (required): Register the field in the form.
  • label (required): Display field label.
  • options (required): Array of objects { label: string; value: string } to generate <option> elements.
  • initialOptionLabel: Placeholder for the dropdown (Default: "Select"). Becomes hidden on user toggle, if required is set.
  • Any valid HTMLSelectElement attributes.

---

InputTextArea

• Props:
  • name (required): Register the field in the form.
  • label (required): Display field label.
  • maxLength: Sets the limit and also displays an overlay showing the number of characters typed.
  • Custom scrollbars for better UX.
  • Any valid HTMLTextareaElement attributes.

---

InputCheckBox

• A custom <input type="checkbox" /> element.
• Props:
  • name (required): Register the field in the form.
  • label (required): Display field label.
  • Any valid HTMLInputElement attributes, except type, which is set to "checkbox".

---

InputRadio

• A group of <input type="radio" /> elements.
• Props:
  • name (required): Register the field in the form.
  • label (required): Display field label.
  • options (required): Array of objects { label: string; value: string } to generate radio buttons.
  • Any valid HTMLInputElement attributes, except type (set to "radio") and value (derived from options).