Skip to main content

Getting Started

🚀 Installation​

Installing React Persian Form only takes a single command and you're ready to roll.

npm i react-persian-form

🔧 Setup​

  1. For proper styling and right-to-left text direction, ensure your index.html file is set up for Persian (fa) language and rtl direction.
<html lang="fa" dir="rtl">
    ...
</html>
  1. Import the package styles into your main application file (e.g., App.tsx or main.tsx).
import "react-persian-form/styles";

💡 Usage​

import { useForm } from "react-hook-form";
import {
    PersianFieldText,
    PersianFieldCellphone,
    PersianFieldNumeric,
} from "react-persian-form";
import yup, { useYupValidationResolver } from "react-persian-form/resolvers/yup";

// Import styles
import "react-persian-form/styles";

function MyForm() {
    // 1. Define your validation schema using Yup and custom methods
    const schema = yup.object({
        firstName: yup.string().required().space(2).halfSpace().onlyFaCharacters(),
        lastName: yup.string().required().space(2).halfSpace().onlyFaCharacters(),,
        cellphone: yup.string().required().cellphone(),
        nationalId: yup.string().required().nationalId(),
    });

    // 2. Use the custom validation resolver
    const resolver = useYupValidationResolver(schema);

    // 3. Initialize react-hook-form
    const formMethods = useForm({ resolver });

    const onSubmit = formMethods.handleSubmit((data) => {
        console.log("Form Data:", data);
    });

    // 4. Use the components in your form
    return (
        <form onSubmit={onSubmit}>
            <PersianFieldText
                label="نام"
                name="firstName"
                control={formMethods.control}
            />

            <PersianFieldText
                label="نام‌خانوادگی"
                name="lastName"
                control={formMethods.control}
            />

            <PersianFieldCellphone
                label="شماره‌تلفن"
                name="cellphone"
                control={formMethods.control}
            />

            <PersianFieldNumeric
                label="کدملی"
                name="nationalId"
                control={formMethods.control}
            />

            <button type="submit">ثبت فرم</button>
        </form>
    );
}

export default MyForm;