@jouwomgeving/ui-form

Dictator package JO ui form

Stats

StarsIssuesVersionUpdatedCreatedSize
@jouwomgeving/ui-form
1.4.19a year ago6 years agoMinified + gzip package size for @jouwomgeving/ui-form in KB

Readme

Form

$ npm install @jouwomgeving/ui-form

Usage

import * as Form from '@jouwomgeving/ui-form';

function Layout() {
  return (
    <Form.Form>

      <Form.Header>Dit is een formulier</Form.Header>

      <Form.Fieldset title="Dit is een fieldset">

        <Form.Field
          label="Voornaam"
          direction="horizontal"
          helpText="Cras justo odio, dapibus ac facilisis in, egestas eget quam."
        >
          <Form.Input
            placeholder="Vul hier je voornaam in.."
          />
        </Form.Field>

      </Form.Fieldset>

      <Form.Fieldset title="Dit is een ander fieldset">

        <Form.Field
          label="Voornaam"
          direction="horizontal"
          helpText="Cras justo odio, dapibus ac facilisis in, egestas eget quam."
        >
          <Form.Input
            placeholder="Vul hier je voornaam in.."
          />
        </Form.Field>

        <Form.Field
          label="Nieuwsbrief ontvangen"
          direction="horizontal"
        >
          <Form.Switch
            checked
            disabled
            onChange={() => {}}
          />
        </Form.Field>

      </Form.Fieldset>
    </Form.Form>
  )
}

export default Layout

Components

Form

About

The basic form component. Wraps Fields and Fieldsets. No custom styling yet.

Header

About

Form Header component. Wraps children in H1 with a border.

Properties

Prop Values Default Required
children ReactElement false

Fieldset

About

The fieldset wraps any number of field components. TODO: Fieldsets should be able to display a number in front of the title

Properties

Prop Values Default Required
children ReactElement false
title string true

Field

About

The Field component wraps a Input component and delivers a label and helptext on correct places. Is provided with aria-attributes for screenreaders.

Properties

Prop Values Default Required
children ReactElement false
label string false
helpText string false
direction enum vertical true

Hoc Components and Object Composition

TLDR; added multiple HoC containers for forms Components. These in general will handle:

  • Events: before a call from each component was necessary to call Parent / WrappedContainer (callParent), these events where not stacked. Events are now handled with composition; each HoC can receive multipe events, these events are stacked and called by any which is { enhanced => with => Events }.

Changelog

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.