@ipr/nexus-react-components
TypeScript icon, indicating that this package has built-in type declarations

1.0.0 • Public • Published

@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

Readme

Keywords

none

Package Sidebar

Install

npm i @ipr/nexus-react-components

Weekly Downloads

1

Version

1.0.0

License

MIT

Unpacked Size

13.2 kB

Total Files

22

Last publish

Collaborators

  • oleg.koleskin
  • esneko