@nokacreative/generic-react-form
v1.1.15
Published
A generic form made in react.
Downloads
39
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
- Define your form configuration
- Define your default form values (can be an empty object)
- 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: