TypeScript

Formium React's source code is written with TypeScript and so it has correct and always up-to-date types. If you're not familiar with TypeScript, it's worth checking out! It's an open-source superset of JavaScript that adds optional static typing. Learn more at https://typescriptlang.org

In addition, @formium/react (and @formium/client's) source code uses TSDoc-style comments, so you'll have awesome autocomplete in VSCode and editors that support it. Furthermore, we actually use the type graph to generate most of the reference documentation, so you can explore it interactively on this website.

TypeScript Quickstarts

The best way to start a new Formium x TypeScript project is with this Next.js starter we've made.

Next.js

Source Code

TSDoc Tags

If you use VSCode, or explore the type declaration files you'll see TSDoc-style comments above just about everything. It's worth pointing out a few doc comment tags to keep in mind as they relate to stability and semantic versioning.

• @internal - The entity is internal and should never be relied upon in your code.
• @public - The entity is in public and can be used in your code.
• @deprecated - The entity is deprecated and will be removed in later versions. It should not be used. If you use an updated version of VSCode, the editor will alter the UI to warn you about this (depending on your VSCode theme) (learn more here).
• @alpha - The entity is in experimental preview. It may change significantly in the future. It could also mark a feature or key that has not yet been completely implemented (either in the dashboard or in the library).

Example

import * as React from 'react'
import {
  FormiumForm,
  FormiumComponents,
  TextInputProps,
  RadioProps,
  defaultComponents
} from '@formium/react'
function TextInput(props: TextInputProps) {
   return <input {....props} className="my-field" />
}
function Radio({ label, ...props }: RadioProps) {
  return (
    <label>
      <input type="radio" {...props} />
      {label}
    </label>
  );
}
// Always define these outside of React so that
// components are not needlessly recreated on each render
const myComponents: FormiumComponents = {
   ...defaultComponents,
   TextInput,
   Radio
}
export default function MyForm({ form }) {
  return (
    <Formium
      data={form}
      components={myComponents}
      onSubmit={async values => {
        ...
      }}
    />
  );
}
// Note: `form` must be loaded from the @formium/client.