Neonatal Penguin March

    @jouwomgeving/ui-form

    2.0.4 • Public • Published

    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

    Keywords

    none

    Install

    npm i @jouwomgeving/ui-form

    DownloadsWeekly Downloads

    769

    Version

    2.0.4

    License

    UNLICENSED

    Unpacked Size

    561 kB

    Total Files

    180

    Last publish

    Collaborators

    • gaaltink.avinty
    • marcelblijleven_avinty
    • ivanhulzen
    • dkainama
    • rvanleeuwen
    • heesink
    • hellobramkok
    • dbunskoek