semantic-form

A declarative form builder api for react apps using the power of React Final form.

This library uses Semantic UI React as the form components supplier.

See semantic-form for live examples.

Installation and usage

The easiest way to use semantic-form is to install it from npm and build it into your app with bundler of your choice.

npm i semantic-form

Then use to build Forms like

import React from "react";
import { Form, Field, Condition } from "semantic-form";

const SimpleForm = () => {
  const onSubmitHandler = values => {
    console.log("values", values);
  };
  return (
    <Form
      onSubmit={onSubmitHandler}
      render={() => {
        return (
          <>
            <Field name="fullname" labelText="Full name" required />
            <Field
              name="age"
              type="number"
              labelText="Age"
              required
              hint="Driving license required for adults (age > 18)"
            />
            <Field
              name="gender"
              fieldType="dropdown"
              labelText="Gender"
              options={[
                { text: "Male", value: "male" },
                { text: "Female", value: "female" }
              ]}
              selection
            />
            <Condition when="age" condition={value => value > 18}>
              <Field name="licenseNo" labelText="Driving license Number" />
            </Condition>
          </>
        );
      }}
    />
  );
};

Props

Since semantic-form is built using the base components from Semantic UI React, it is powered with all the features that Semantic UI React provides.

Props you may want to specify include:

Field

• required - Checks the field for mandatory
• fieldType - Type of the field.
• labelText - Label for the field
• hint - Hint text for the field

Condition

• when - Name of the field to be checked for
• is - Value to compare with
• condition - A callback to check for the condition on which the children is rendered

IfElse

• when - Name of the field to be checked for
• is - Value to compare with
• condition - A callback to check for the condition on which the children is rendered
• renderOnTrue - JSX to be rendered if the condition is satisfied
• renderOnFalse - JSX to be rendered if the condition is NOT satisfied

WORK IN PROGRESS