@Depack/Form

Welcome to the website about @depack/form component that allows to build Bootstrap forms via the Preact library.

Writing Forms In JSX

The main advantage of this package is that it allows to write forms in JSX language easily, using the same structure as Bootstrap form groups, but with the FormGroup component automatically generating the id and help-id for inputs.

import Form, {
  FormGroup, TextArea, Input, Select, SubmitButton, SubmitForm,
} from '../src'

class ExampleForm extends SubmitForm {
  render({ onChange, ...props }) {
    const { formLoading, error, success } = this.state

    return (<Form {...props} onSubmit={this.submit.bind(this)} onChange={values => {
      this.reset()
      if(onChange) onChange(values)
    }}>
      <FormGroup label="Input" help="Type in something...">
        <Input name="input" value="hello-world" />
      </FormGroup>
      <FormGroup label="Select" help="Please select...">
        <Select name="select" value="2" options={[
          {
            title: 'Free will',
            value: '1',
          },
          {
            title: 'Unfree will',
            value: '2',
          },
        ]} />
      </FormGroup>
      <FormGroup label="TextArea" help="Multiple row input...">
        <TextArea name="textarea">
          One must still have chaos in oneself to be able to give birth to a dancing star.
        </TextArea>
      </FormGroup>
      <SubmitButton loading={formLoading} type="warning"
        confirmText="Submit Data" />
      {error && `Error: ${error}`}
      {success && `OK`}
    </Form>)
  }
}

export default ExampleForm

API

The package exports multiple components:

import Form, {
  FormGroup, Input, TextArea, Select,
} from '@depack/form'

Read about each in the GitHub documentation.

Demo

The form in the example can be rendered within the following app:

import { render, Component } from 'preact'
// import 'preact/devtools/'
import ExampleForm from './ExampleForm'

class Main extends Component {
  render() {
    return (
      <div className="container">
        <h1>@Depack/Form</h1>
        <blockquote className="blockquote">
          The Preact component that creates and maintains
          the form state (designed for Depack bundler).
        </blockquote>
        <div className="row">
          <div className="col-sm-6">
            <ExampleForm onChange={(values) => {
              this.setState(values)
            }} path="/form" />
          </div>
          <div className="col-sm-6">
            <pre style="white-space: pre-wrap;">{
              JSON.stringify(this.state, null, 2)
            }</pre>
          </div>
        </div>
      </div>)
  }
}

render(<Main />, document.querySelector('#preact'))