sir-forms-a-lot v0.3.9
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>
)
}
5 years ago
5 years ago
5 years ago
5 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago