@toolsify/form

A comprehensive library of form components built with Mantine and React Hook Form. It provides pre-configured components, utilities, and wrappers for seamless form management in React applications.

---

Installation

Install the package using npm or yarn:

1npm install @toolsify/form
2# or
3yarn add @toolsify/form

Peer Dependencies

Make sure the following peer dependencies are installed in your project:

• react
• react-dom
• @toolsify/core

You can install them using:

1npm install react react-dom @toolsify/core

---

Components

Below is the list of components provided by the library:

Input Components

• TextInput: A basic text input field.
• PhoneInput: A phone number input field with country code support.
• NumberInput: A numeric input field.

Checkbox Components

• Checkbox: A single checkbox input.
• CheckboxGroup: A group of checkboxes.

Chip Components

• Chip: A single chip component.
• ChipGroup: A group of chips.

Color Components

• ColorInput: A color input field.
• ColorPicker: A color picker component.

File Components

• FileInput: A file input field.
• FileUpload: A drag-and-drop file upload component.

JSON Component

• JsonInput: A JSON input field.

Password Component

• PasswordInput: A password input field.

Pin Component

• PinInput: A pin input field.

Radio Components

• RadioGroup: A group of radio buttons.

Rating Component

• Rating: A star rating component.

Segment Component

• SegmentedControl: A segmented control component.

Select Components

• Select: A dropdown select field.
• NativeSelect: A native dropdown select field.
• MultiSelect: A multi-select dropdown field.

Slider Components

• Slider: A slider input field.
• RangeSlider: A range slider input field.

Switch Components

• Switch: A toggle switch.
• SwitchGroup: A group of toggle switches.

Textarea Component

• Textarea: A multi-line text input field.

Date Components

• DateInput: A date input field.
• DatePicker: A date picker component.
• DatePickerInput: A date picker input field.
• DateTimePicker: A date and time picker component.

Upload Component

• FileUpload: A drag-and-drop file upload component with preview support.

---

Key Wrappers and Utilities

1. FormProvider

The FormProvider is a wrapper for managing form state using React Hook Form. It simplifies form handling and submission.

Example:

1import React from "react";
2import { useForm, FormProvider } from "@toolsify/form/providers";
3import { TextInput } from "@toolsify/form";
4
5const App = () => {
6  const methods = useForm();
7
8  const onSubmit = (data: any) => {
9    console.log(data);
10  };
11
12  return (
13    <FormProvider {...methods} onSubmit={methods.handleSubmit(onSubmit)}>
14      <TextInput name="example" label="Example Input" />
15      <button type="submit">Submit</button>
16    </FormProvider>
17  );
18};
19
20export default App;

---

2. Resolvers

The library provides built-in support for schema validation using zod and yup resolvers.

Example with Zod:

1import React from "react";
2import { useForm, FormProvider } from "@toolsify/form/providers";
3import { z } from "zod";
4import { zodResolver } from "@toolsify/form/plugins";
5import { TextInput } from "@toolsify/form";
6
7const schema = z.object({
8  email: z.string().email("Invalid email address"),
9});
10
11const App = () => {
12  const methods = useForm({
13    resolver: zodResolver(schema),
14  });
15
16  const onSubmit = (data: any) => {
17    console.log(data);
18  };
19
20  return (
21    <FormProvider {...methods} onSubmit={methods.handleSubmit(onSubmit)}>
22      <TextInput name="email" label="Email Address" />
23      <button type="submit">Submit</button>
24    </FormProvider>
25  );
26};
27
28export default App;

---

3. TextInput

A basic wrapper around Mantine's TextInput component, integrated with React Hook Form.

Example:

1import React from "react";
2import { TextInput } from "@toolsify/form";
3
4const App = () => {
5  return <TextInput name="example" label="Example Input" />;
6};
7
8export default App;

---

4. FileUpload

A drag-and-drop file upload component with preview support.

Example:

1import React from "react";
2import { FileUpload } from "@toolsify/form";
3
4const App = () => {
5  return <FileUpload name="files" label="Upload Files" />;
6};
7
8export default App;

---

5. DateInput

A date input field integrated with React Hook Form.

Example:

1import React from "react";
2import { DateInput } from "@toolsify/form";
3
4const App = () => {
5  return <DateInput name="date" label="Select Date" />;
6};
7
8export default App;

---

License

This project is licensed under the MIT License.