@danderson00/react-forms

Ultra simple, stateless, validated forms for use in React function components.

Installation

yarn add @danderson00/react-forms

Usage

import React from 'react'
import { Form, Input, Textarea, Select, Submit } from '@danderson00/react-forms'

export default ({ onSubmit, onCancel, initialValues }) => (
  <Form onSubmit={onSubmit} values={initialValues}>
    <label>Name</label>
    <Input name="name" required minLength="5" maxLength="50" />

    <label>Description</label>
    <Textarea name="description" maxLength="100" />

    <label>Type</label>
    <Select name="type" options={['', 'Widget', 'Component']} required />

    <label>Rating</label>
    <div>
      <Input name="rating" type="radio" numeric value="1" checked />
      <Input name="rating" type="radio" numeric value="2" />
      <Input name="rating" type="radio" numeric value="3" />
    </div>

    <label>Urgent</label>
    <Input name="urgent" type="checkbox" />

    <div>
      <Submit>Submit</Submit>
      <button onClick={onCancel}>Cancel</button>
    </div>
  </Form>
)

All props passed to components are passed to underlying HTML elements. Standard HTML option elements can also be used for specifying options for the Select component. Using type="number" or adding a numeric prop will coerce the provided value to a Number type. Specifying a value prop for checkboxes causes the output value to toggle between the provided value and undefined.

Form onSubmit handlers are passed an object containing form values:

{
  "name": "",
  "description": "",
  "type": "",
  "rating": 1,
  "urgent": false
}

The onSubmit handler passed to the Form component is only called if validation passes. Form submission is also triggered when the Enter key (or Go button on mobile) is pressed while form elements are active.

Deep Object Structures

Simple dotted notation can be used to create deep object structures:

<Form>
  <Input name="name" />
  <Input name="inventory.stockLevel" type="number" />
  <Input name="inventory.quantityOnOrder" type="number" />
  <Submit onSubmit={values => console.log(values)} />
</Form>

{
  "name": "",
  "inventory": {
    "stockLevel": 0,
    "quantityOnOrder": 0
  }
}

Styling

No styling is provided out of the box. Default corresponding HTML elements are used and can be directly styled using CSS or style attributes.

Additionally, a validated class is applied to individual elements as they change, and to the form when it is submitted. This allows you to make use of the :invalid CSS pseudo-class, but only display validation styles after validation has occurred.

Styling to work with the example code above might look something like:

form > * {
  display: block;
}

form label {
  font-size: 0.8em;
}

form label:not(:first-child) {
  margin-top: 5px;
}

form .validated:invalid {
  outline: 1px solid red;
}

Custom Components

react-functional-forms exposes functions that can be used to wrap components so that they can be included in output form value objects.

import React from 'react'
import { wrapInput, wrapSubmit, Form } from '@danderson00/react-forms'

const InputField = wrapInput(({ label, className, ...inputProps }) =>
  <div className={className}>
    <label>{label}</label>
    <input {...inputProps} />
  </div>
)

const AnchorSubmit = wrapSubmit(props => <a {...props} />) 

export const SampleForm = ({ onSubmit }) => (
  <Form onSubmit={onSubmit}>
    <InputField label="Name" name="name" required />
    <InputField label="Description" name="description" maxLength="100" />
    <InputField label="Urgent" name="urgent" type="checkbox" />
    <AnchorSubmit>Submit</AnchorSubmit>
  </Form>
)

The wrapInput function manages the value and onChange props and in most cases, these are the only props you need to pass to your input component. In the example above, all other props are also passed on to enable validation.

If your custom component is rendered with a type prop of radio or checkbox, this will cause the checked prop to become managed instead of value, and should be passed to your input component. You can also force the component to be treated as a radio button or checkbox by specifying options to the wrapInput function. More on this below.

The wrapSubmit function manages the onClick and disabled props of your submit component. All other props can be safely ignored or passed on.

Integration With Third Party Libraries

The functions described above can also be used to easily wrap components from third party libraries.

import { wrapInput } from 'react-functional-forms'
import * as material from '@material-ui/core'

export const Input = wrapInput(material.Input)
export const Checkbox = wrapInput(material.Checkbox, { type: 'checkbox' })
export const Radio = wrapInput(material.Radio, { type: 'radio' })
export const Select = wrapInput(material.Select, { type: 'select' })
export const Switch = wrapInput(material.Switch, { type: 'checkbox' })

API

wrapInput(component, options)

Options are as follows:

Option|Type|Default|Description ---|---|---|--- type|string|'text'|One of text, radio, checkbox or select. passErrorProp|boolean|false|Passes a boolean prop named error when field validation fails. valueFromEvent|function||Override the default mechanism for retrieving a new field value from an onChange event. All function arguments are passed on. defaultValue|any||Specify the default value for the field. Can be a value or a function that returns a value.

wrapSubmit(component)

License

The MIT License (MIT)

Copyright © 2022 Dale Anderson

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.