@zecos/ui v0.0.4

@zecos/ui

Installation

yarn add @zecos/ui

npm i -S @zecos/ui

About

@zecos/ui is a library for quickly creating form fields in conjunction with @zecos/react-fieldz. It provides several simple UI components for rapid form prototyping:

• TextInput
  • ({actions, state, fieldName}) => <input />
• TextArea
  • ({actions, state, fieldName}) => <textarea />
• Select
  • ({actions, state, fieldName, options}) => <select />

Example

import React from "react"
import { nameValidator } from "@zecos/validatorz"
import { useFieldz } from "@zecos/react-fieldz"
import { TextInput, TextArea, Select } from "@zecos/ui"

const fieldProperties = {
  name: {
    init: "",
    validate: nameValidator,
  },
  describeYourself: {
    init: "",
  },
  favoriteColor: {
    init: "red",
  },
}

const colors = {
  red: "Red",
  green: "Green",
  blue: "blue",
}

export const Form = () => {
  const [state, actions] = useFieldz(fieldProperties)

  <form className="form">
    <TextInput
      fieldName="name"
      state={state}
      actions={actions}
    />
    <TextArea
      fieldName="describeYourself"
      state={state}
      actions={actions}
    />
    <Select
      fieldName="favoriteColor"
      state={state}
      actions={actions}
      options={colors}
    />
  </form>
}