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
;; const SimpleForm = { const onSubmitHandler = { console; }; 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 > 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 mandatoryfieldType
- Type of the field.labelText
- Label for the fieldhint
- Hint text for the field
Condition
when
- Name of the field to be checked foris
- Value to compare withcondition
- A callback to check for the condition on which the children is rendered
IfElse
when
- Name of the field to be checked foris
- Value to compare withcondition
- A callback to check for the condition on which the children is renderedrenderOnTrue
- JSX to be rendered if the condition is satisfiedrenderOnFalse
- JSX to be rendered if the condition is NOT satisfied
WORK IN PROGRESS