Z quick forms

Dynamic forms made from config

Usage Basic example:

 <FormEngine
        Submit={({ data }) => {
          return <div onClick={() => console.log(data)}>Submit</div>;
        }}
        config={[
          {
            question: "What is your name",
            name: "name",
            type: "text",
          },
          {
            question: "Your birthday",
            name: "birthday",
            type: "date",
          },
        ]}
      />

**Conditional render on non null fields **

1. option

 <FormEngine
        Submit={({ data }) => {
          return <div onClick={() => console.log(data)}>Submit</div>;
        }}
        config={[
          {
            question: "What is your name",
            name: "name",
            type: "text",
          },
          {
            question: "Your birthday",
            name: "birthday",
            type: "date",
            parent: "name",
          },
        ]}
      />

2.option <FormEngine Submit={({ data }) => { return <div onClick={() => console.log(data)}>Submit; }} config={[ { question: "What is your name", name: "name", type: "text", additionalInputs: [ { question: "Your birthday", name: "birthday", type: "date", }, ], }, ]} /> **Conditional render based on specific values **

1. option

<FormEngine
        Submit={({ data }) => {
          return <div onClick={() => console.log(data)}>Submit</div>;
        }}
        config={[
          {
            question: "What is your name",
            name: "name",
            type: "text",
            additionalInputs: [
              {
                question: "Your birthday",
                name: "birthday",
                type: "date",
                displayCondition: (val) => val === "John",
              },
            ],
          },
        ]}
      />

2. option

   <FormEngine
        Submit={({ data }) => {
          return <div onClick={() => console.log(data)}>Submit</div>;
        }}
        config={[
          {
            question: "What is your name",
            name: "name",
            type: "text",
          },
          {
            question: "Your birthday",
            name: "birthday",
            type: "date",
            displayCondition: (val) => val === "John",
            parent: "name",
          },
        ]}
      />

Error handling

 {
            question: "What is your name",
            name: "name",
            type: "text",
            customValidator: (value, values, setError) => {
              if (value !== "John") {
                setError("Invalid name");
                return true;
              }
              return false;
            },
          },

Accessing form data

 customValidator: (value, values, setError) => {
              if (value !== "John") {
                setError("Invalid name");
                return true;
              }
              return false;
            },
          },

Object values contains all answers and you can access them like on any other object. (ex: values["name"], values.name)

Styling You can pass inline styling

            style: { backgroundColor: "red" },

Or you can pass className (works best with tailwind)

NOTE Nesting has no limits on depth