Button

This component has to be a child within the <Form /> component. This component gets the state from the <Form /> component and returns it on its onClick prop. If the <Form /> component has the validate prop set, the button will be disabled as long as the form is valid.

Basic Usage

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

Render a <Form /> with a <Button /> component.

<Form>
  <div>
    <Button
      id="submit"
      type="submit"
      onClick={state => alert(JSON.stringify(state, null, 2))}
    >
      Click me to see the state of the form
    </Button>
  </div>
</Form><Form>
  <div>
    <Button
      id="submit"
      type="submit"
      onClick={state => alert(JSON.stringify(state, null, 2))}
    >
      Click me to see the state of the form
    </Button>
  </div>
</Form>

Usage with actual values

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

Render a <Form /> with a <Button /> and a <Field /> component.

<Form>
  <div>
    <div>Email</div>
    <div>
      <Field id="email" type="email" required />
    </div>
  </div>
  <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)
      }}
      onMouseEnter={(e, state) => consolelog(e, state)}
      onMouseLeave={(e, state) => consolelog(e, state)}
    >
      Submit
    </Button>
  </div>
</Form><Form>
  <div>
    <div>Email</div>
    <div>
      <Field id="email" type="email" required />
    </div>
  </div>
  <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)
      }}
      onMouseEnter={(e, state) => consolelog(e, state)}
      onMouseLeave={(e, state) => consolelog(e, state)}
    >
      Submit
    </Button>
  </div>
</Form>

Props

Property	Type	Required	Description
id	String	true
type	String	true	`submit`
onClick	Func	false	returns the state of the form
onMouseEnter	Func	false	returns the event and the state of the form
onMouseLeave	Func	false	returns the event and the state of the form (does not work on `disabled` buttons)
rfpRole	String	false	only needed for dynamically added fields, either `addField` or `removeField`
fieldId	String	false	only needed for dynamically added fields on a button with rfpRole `removeField` (the id of the field to remove)
field	Object	false	only needed for dynamically added fields on a button with rfpRole `addField`. This object holds at least `id`, `type`, and may hold `min`, `max`, `required`, `match`, `sameAs`

Button

.css-1r0pe6c{color:inherit;-webkit-text-decoration:none;text-decoration:none;}.css-1r0pe6c:hover{-webkit-text-decoration:underline;text-decoration:underline;}Basic Usage

Usage with actual values

Props

Basic Usage