CREATEFORM

Createform provides you with a simple way to create forms with React

yarn add @createform/react

Flexible

Looking to create a form that can handle onSubmit, onChange, or debounced events? With Createform, you have the power to create forms with custom fields and validation rules. Createform lets you create forms that can be used in either controlled or uncontrolled mode, giving you the flexibility to design the form that best fits your needs. So why wait? Start creating powerful forms with Createform today!

Easy

Less code. Createform is the easiest way to create forms with React. Create a form and use it wherever you want, don't worry with React Context, or Redux. You can share your form with other components just by using the hook created by createForm function.

Performant

Just one render. There are many form libraries, most of which are heavy, and allow you to create just one kind of form, but with Createform you can fulfill and submit a form with just one render.

Less code

Trust us, you will not find another better way to write forms in ReactJS, write less code, use it wherever you want. You don't need to add a function to handle all needed events in an input, you just need to use the register function.Read more

javascript

const useForm = createForm({
  initialValues: {
    name: "Jesse Woodson James",
    email: "jesse@jesse.com",
    bio: ""
  }
  mode: "onChange",
});

javascript

const Controlled: React.FC = () => {
  const { register } = useForm({
    onChange: (e) => console.log(e)
  });

  return (
    <form>
      <input
        autoComplete="off"
        {...register("name")}
      />
    </form>
  )
}

Inline validation

When passing an object as argument, you can provide a property named "validate". The "validate" property in the register function is used to specify the validation criteria for a particular field in the form.register function.Read more

javascript

<form>
  <input
    autoComplete="off"
    {...register({name: "password", validate: z.string().min(8)})}
  />
</form>