@nokacreative/generic-react-form

A generic form made in react.

Usage no npm install needed!

<script type="module">
  import nokacreativeGenericReactForm from 'https://cdn.skypack.dev/@nokacreative/generic-react-form';
</script>

README

A generic form written in React and Typescript with many features.

View the demo here. The demo's repository can also be found here.

Installation

npm i @nokacreative/generic-react-form

or

yarn add @nokacreative/generic-react-form

Features

  • Integrated validation
  • Responsive controls and layouts
  • Script-based configuration rather than HTML
  • Simple customization of styling and messages

Usage Overview

  1. Define your form configuration
  2. Define your default form values (can be an empty object)
  3. Plug them into <Form>
import { Form, FormSectionConfig, FormControlType, InputType } from '@nokacreative/generic-react-form'
import '@nokacreative/generic-react-form/dist/index.css' // <-- Must add this for proper styling to work, even if using custom styles

import { emptyModel } from './data'

interface TestFormModel {
  username: string,
  password: string,
  age: number
}

const config: FormSectionConfig<TestFormModel>[] = [
  {
    headerText: 'Login Details',
    controlRows: [
      {
        controls: [
          {
            type: FormControlType.INPUT,
            label: 'Username',
            propertyPath: 'username',
            isRequired: true,
          },
          {
            type: FormControlType.INPUT,
            label: 'Password',
            propertyPath: 'password',
            inputType: InputType.PASSWORD,
            isRequired: true,
          },
          ...
        ]
      }
    ]
  }
]

const App = () => (
  <Form
    sections={config}
    defaultValues={emptyModel}
  />
)

Becomes this:

Form