@ipr/nexus-react-components
React components integrated with
Nexus
APIs
Development
yarn
yarn build
Installation
yarn add @ipr/nexus-react-components
Usage
Minimum valuable example:
import { InputField } from '@ipr/nexus-react-components'
import { Formik } from 'formik'
const Form: React.FunctionComponent = () => (
<Formik initialValues={initialValues}>
{({ values, errors, touched, handleChange, handleBlur }) => (
<InputField
name="title"
label="Title"
value={values.title}
handleChange={handleChange}
handleBlur={handleBlur}
isTouched={touched && touched[name]}
errorMessage={errors && errors[name]}
/>
)}
</Formik>
)
Integration with Nexus:
- create a custom api or use one from the default package
@ipr/nexus-form-state
- pass the default or a custom handler as
setFieldValue
as prop toInputField
- call the Nexus method
setControlValue
from the custom handler manually
import { useFormState } from '@ipr/nexus-form-state'
import { InputField } from '@ipr/nexus-react-components'
const FormApplet: React.FunctionComponent<FormProps> = ({
appletName,
initialState
}) => {
const [api] = useFormState(appletName, initialState)
return <InputField {...props} setFieldValue={api.setFieldValue} />
}
References
- @ipr/nexus-react-components