@ipr/nexus-form-state
v1.0.0
Published
> `Nexus Form` API between `Nexus Bridge` and React components with state container
Downloads
4
Readme
@ipr/nexus-form-state
Nexus Form
API betweenNexus Bridge
and React components with state container
Development
yarn
yarn build
Installation
yarn add @ipr/nexus-form-state
Usage
- Create an initial state for the form applet:
import { ControlState, FormState } from '@ipr/nexus-form-state'
const controlState: ControlState = {
label: '',
value: '',
readonly: false,
required: false,
displayFormat: ''
}
const initialState: FormState = {
Id: controlState,
Description: controlState
}
- Add an integration within React component:
import * as React from 'react'
import { useFormState } from '@ipr/nexus-form-state'
import { InputField } from '@ipr/nexus-react-components'
interface FormProps {
appletName: string
initialState: FormState
}
const FormApplet: React.FunctionComponent<FormProps> = ({
appletName,
initialState
}) => {
const [formApi, formState, initialValues, isLoading] = useFormState(
appletName,
initialState
)
const { saveRecord, setControlValue } = formApi
return React.useMemo(
() =>
!isLoading && (
<Formik initialValues={initialValues} onSubmit={saveRecord}>
{({ values, errors, touched, handleChange, handleBlur }) => (
<Form>
<InputField
name="Description"
label="Description"
value={values['Description'] as string}
required={formState['Description'].required}
readonly={formState['Description'].readonly}
isTouched={touched && touched['Description']}
errorMessage={errors && errors['Description']}
handleChange={handleChange}
handleBlur={handleBlur}
setFieldValue={setControlValue}
/>
</Form>
)}
</Formik>
),
[formState, initialValues, isLoading, saveRecord, setControlValue]
)
}