npm package: @stefanbahnson/form-components
Description: React form components
Author: Stefan Bahnson
Latest version: 1.1.0

# @stefanbahnson/form-components

>

[![NPM](https://img.shields.io/npm/v/@stefanbahnson/form-components.svg)](https://www.npmjs.com/package/@devella/form-components) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash
npm install --save @stefanbahnson/form-components
```

## Usage

```jsx
import React, { Component } from 'react'
import { InputField, SelectField } from '@stefanbahnson/form-components'

export default class App extends Component {
  state = {
    inputText: 'text',
    password: 'pass',
    selectValue: '',
    isValid: false,
    formData: {},
  }

  submitForm(e) {
    e.preventDefault()
    const { formData, isValid, ...formFields } = this.state
    if (isValid) {
      this.setState({ formData: formFields })
    } else {
      this.setState({ formData: 'Form invalid' })
    }
  }

  render() {
    const { inputText, password, selectValue } = this.state
    return (
      <form onSubmit={e => this.submitForm(e)}>
        <h1>Examples</h1>
        <section>
          <h3>Select</h3>

          <SelectField
            label="Select Field"
            description="Description"
            value={selectValue}
            placeholder="Placeholder text"
            onInput={currentSelectValue =>
              this.setState({ selectValue: currentSelectValue })
            }
            options={[1, 2, 3, 4]}
            unit="st"
          />
        </section>

        <section>
          <h3>Input</h3>
          <InputField
            label="Text Field"
            description="Description"
            value={inputText}
            placeholder="Placeholder text"
            onInput={(currentValue, isValid) =>
              this.setState({ inputText: currentValue, isValid })
            }
            validator={currentInputText => {
              return currentInputText.length > 2
            }}
            type="text"
          />
        </section>

        <section>
          <h3>Input</h3>
          <InputField
            label="Password Field"
            description="min 5 chars"
            value={password}
            placeholder="Placeholder text"
            onInput={(currentValue, isValid) =>
              this.setState({ password: currentValue, isValid })
            }
            validator={currentInputText => {
              return currentInputText.length > 4
            }}
            type="password"
          />
        </section>

        <button
          style={{
            border: '1px solid',
            borderRadius: 4,
            padding: '16px 32px',
            marginTop: 32,
            fontSize: '1rem',
          }}
        >
          Send
        </button>

        <section>
          <h3>State</h3>
          <pre>
            {JSON.stringify(
              {
                inputText,
                selectValue,
                password,
              },
              null,
              2
            )}
          </pre>
        </section>

        <section>
          <h3>Form Status</h3>
          <pre>{JSON.stringify(this.state.formData, null, 2)}</pre>
        </section>
      </form>
    )
  }
}
```

## License

MIT © [](https://github.com/)