@ipr/nexus-react-components v1.0.0

@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 to InputField
• 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