Sir Forms a Lot

Declaritve forms for React. Handles lifecycle and validation; bring your own components.

Installation

yarn add sir-forms-a-lot

Usage

Any examples will be using Styled Components but Styled Components are not required; any library which outputs a React Component will work.

Setup Form Defaults

Since the form does not come with any components you'll need to bring your own.

Example

import { createForm } from 'sir-forms-a-lot'
import defaultBlocks from 'sir-forms-a-lot/blocks'
import * as defaultComponents from 'sir-forms-a-lot/components'

const Form = createForm({
  blockTypes: defaultBlocks,
  components: defaultComponents
})

// Implement Form
<Form
  ...your config here
/>

Blocks

Blocks are what makeup the form that a user sees and interacts with. The form needs to know what blocks are available to render the form.

Components

There are components that are needed to render the structure of the form itself unrelated to the blocks. You can use the default components or provide your own. If you wish to provide your own components you will need to provide the following:

const defaultComponents = {
  AlternateButton,
  Container,
  Description,
  ErrorMessage,
  Fieldset,
  Footer,
  Group,
  Label,
  PrimaryButton,
  Spinner,
  Title
}

You can also import a single component:

import PrimaryButton from 'sir-forms-a-lot/components/button/primary'

Theme Provider

If you use the default components or default blocks you will need to bring in a theme provider. For this instance the theme provider is from Styled Components.

import { createForm } from 'sir-forms-a-lot'
import defaultBlocks from 'sir-forms-a-lot/blocks'
import * as defaultComponents from 'sir-forms-a-lot/components'
import React from 'react'
import theme from 'sir-forms-a-lot/theme'
import { ThemeProvider } from 'styled-components'

const FormComponent = createForm({
  blockTypes: defaultBlocks,
  components: defaultComponents
})

function Form(props) {

  return (
    <ThemeProvider theme={theme}>
      <FormComponent {...props} />
    </ThemeProvider>
  )

}