Formium React

@formium/react is a small React package that automagically renders a Formium form anywhere in your React app or website using your own custom components.

This package serves as a "zero-config" bridge between your Formium forms and your component libary. Philosophically, its goal is to fully abstract away Formium's custom form data structure (i.e. "schema" / AST) from your codebase so you never have to think about it or even interact with it. We like this abstraction so much that we actually use this library to render a version of every form on our platform on forms.formium.io exactly as described below.

Prerequisites

This package requires an active Formium account, project, and a form. You can sign up for free at https://dashboard.formium.io/signup. Free accounts allow for 100 monthly submissions, 10 active forms, and 100MB of total file storage.

Installation

You can install Formium React directly from NPM.

npm install @formium/react @formium/client

Formium React is compatible with React 16.8+ (the one with React Hooks).

The Gist

Assuming you have already setup Formium's API Client, getting started with Formium React takes just seconds. The snippet below assumes that you're using Next.js.

import React from 'react';
import { formium } from '../lib/formium';
import { FormiumForm, defaultComponents } from '@formium/react';
function TextInput(props) {
   return <input {....props} className="my-field" />
}
// Always define these outside of React so that
// components are not needlessly recreated on each render
const myComponents = {
   ...defaultComponents,
   TextInput,
}
export default function MyPage({ form }) {
  return (
   <FormiumForm
      data={form}
      components={myComponents}
      onSubmit={async values => {
       // Send form values to Formium
       await formium.submitForm('your_form_slug', values);
       alert('Success');
      }}
   />
  );
}
// Note: `form` must be loaded from the @formium/client.
export async function getStaticProps(context) {
  const form = await formium.getFormBySlug('your_form_slug');
  return { props: { form } };
}

As you can see, you never need to know what's actually inside of the form object. All you do is pass it to the <FormiumForm> component along with your custom React components and a submit handler.

Customizing Components

You can customize additional components listed in the table below by specifying them in the components prop.