New Package Monster

    test-react-form
    TypeScript icon, indicating that this package has built-in type declarations

    1.2.2 • Public • Published

    Welcome to llama-forms-react 👋

    Version Documentation Maintenance

    An HTML-free component for React form creation that employs a JSON structure to support a variety of form fields with a simple user interface. Simply import LlamaForm from llama-form to get a great form that is driven by JSON schema.

    Content

    Install

    npm i llama-forms-react

    Features

    • Simple to use
    • Form based on a schema
    • Validation regex support
    • Form answer in JSON format
    • Submit button with loader that may be customized
    • Form submission callback function support
    • Custom errorMessage support
    • Support for sensitivity validation
    • Custom style support
    • multi-step form with:
      • Progress bar
      • Current step count with respective to total step
      • User defined initial step (Default is 1)
      • Callback function on each step submission

    Quickstart

    Create a Login Form using Llama Form

    import LlamaForm from "llama-forms-react";
    
    export default function Example() {
      const handleLogin = (data) => {
        console.log("Login data", data);
      };
    
      return (
        <LlamaForm
          schema={{
            title: "Login Form Example",
            description:
              "This is an example of a login form using llama-forms-react.",
            wizard: false, // optional (true for multi-step forms)
            properties: {
              email: {
                type: "string",
                required: true,
              },
              password: {
                type: "string",
                required: true,
              },
            },
          }}
          options={{
            fields: {
              email: {
                type: "email",
                label: "User Email",
                placeholder: "Your email address",
                description: "Email field description",
                validationRegex: "", // validation regex for the input field
                errorMessage: "Email field validation error",
                readOnly: false, // (defaults to false)
                maxLength: 30,
                autoFocus: true,
                autoComplete: true,
              },
              password: {
                type: "password",
                label: "User Passsword",
                placeholder: "Your password Please",
                description: "Password field description",
                validationRegex: "",
                errorMessage: "Password field validation error",
                readOnly: false,
                autoFocus: false,
                autoComplete: true,
              },
            },
          }}
          onSubmit={handleLogin}
        />
      );
    }

    Documentation

    Main Props

    schema: The form's foundation, where you may provide a json schema for the form's creation.

    options: Field properties for the provided schema.

    data: Form field default values

    onSubmit: A callback that accepts a function and returns the form data.

    Schema Props

    1. title: Title of the form.
    2. description: Descripton of the form.
    3. wizard: Option to enable multi-step form, default is false.
    4. properties: Dynamic custom field which you want to render in form.
      • required: Specific field is requirement, default value is false.
      • enum: For option values, this property is applicable for dropdown fields, checkbox fields, radio fields, etc.
      • step: Specify the field position on multistep form. For instance, if the step value is 2 then that field will occur on the second step of the form, deafult value is 1.

    Options Props

    Here we pass all schema fields properties. Which basically contains an object for each field that we describe in the schema.

    1. fields:
      • type: Type of input field, as for email we use "type - email". Input Field type support by llama-forms-react.
        1. text - text field
        2. textarea - text area field
        3. email - email field
        4. password - password field
        5. radio - radio button is used to select one option in multiple options.
        6. checkbox - This is used to select multiple options.
        7. dropdown - This is used for dropdown value. Here we pass multiple values.
        8. color - This is used as color picker
        9. file - This is used for uploading files.
        10. number - number filed.
        11. range - This is used to set a range between two values.
        12. tel - This is used for telephone number input.
        13. time - time field
        14. date - date field
        15. datetime-local - This is used for both date and time at a time.
        16. week- week field
        17. month - month field
        18. uri - This is used for input URI.
      • label:
      • placeholder:
      • description: Description of input field.
      • validationRegex: Custome regex to input field validation.
      • errorMessage:
      • readOnly:
      • maxLength:
      • autoFocus:
      • autoComplete:
      • maxFileSize:
      • minFileSize:
      • min: Minimum value of the input field.
      • max: TMaximum value of the input field.
      • interval: Applicaple with range input field type, we can specify interval between two values.
      • accept: Applicaple with file input field type, we can specify the acceptable file extension. ex - ["jpg", "png", "jpeg"]

    Author

    👤 NetTantra Technologies React Developers (https://github.com/orgs/nettantra/teams/llama-forms-core)

    🤝 Contributing

    Contributions, issues and feature requests are welcome!
    Feel free to check issues page.

    Show your support

    Give a ⭐️ if this project helped you!

    📝 License

    Copyright © 2022 NetTantra Technologies.
    This project is MIT licensed.


    Install

    npm i test-react-form

    DownloadsWeekly Downloads

    9

    Version

    1.2.2

    License

    MIT

    Unpacked Size

    332 kB

    Total Files

    21

    Last publish

    Collaborators

    • mohommed.nt