FieldWrapper

This component is here for edge cases where you get the state from another component and you have to pass it to the <Form /> component manually, e.g. third party components.

This component has to be a child within the <Form /> component. This component exposes three additional props to its child component so that you are able to use third party components.

Basic Usage

import {
  Form,
  FieldWrapper,
} from 'react-form-package';

Render a <Form /> with an <FieldWrapper /> and a <Button /> component.

Take a look into the Third Party Components Section to see how you can use this component properly.

<Form>
    <div>
      <FieldWrapper type="text" id="fieldwrapper">
        {/*
          Render a child component that gets access to
          onFocus
          onBlur
          onChange
        */}
      </FieldWrapper>
    <div>
      <Button id="submit" type="submit" onClick={(state) => {
        alert(JSON.stringify(state, null, 2));
        alert('open the console to see the whole state...');
        console.log(state);
      }}
      >Submit</Button>
    </div>
  </Form>

Props

Props that get exposed to the child component

To see how you can use this properties take a look at Third Party Components