Form Component Module

Form Component Module is a react component package that wraps up informed mechanism and applies some material design style to input and textarea components.

demogif

Installation

You can install it using yarn:

yarn add @redwallsolutions/form-component-module

Or using npm:

npm i @redwallsolutions/form-component-module

Available Components

import {InputField, TextAreaField, Form} from '@redwallsolution/form-component-module'

Props

initialValue

Any

label

String

required

leading

Any

trailling

Any

mask

((value: any) => any) | undefined

maskType

"default" | "money" | "percent" | "cel" | undefined

field

String

required

validate

((value: any) => any) | undefined

validateOnChange

Boolean | undefined

shouldFitContainer

Boolean | undefined

isMultiline

Boolean | undefined

theme

Itheme | undefined

appearance

"default" | "primary" | "secondary" | undefined

Usage

Simplest Form

My Input

<InputField field="somename" label="My Input" /><InputField field="somename" label="My Input" />

The shouldFitContainer prop

It's possible to the field fit to parent width.

I'm responsible

<InputField field="fitmyparent" label="I'm responsible" shouldFitContainer /><InputField field="fitmyparent" label="I'm responsible" shouldFitContainer />

Password Type

What's your password?

<InputField field="password" label="What's your password?" type="password" /><InputField field="password" label="What's your password?" type="password" />

With informed form

<Form onSubmit={console.log}>
  <InputField field="somefield" label="Some Field" />
  <InputField field="OtherField" label="Other Field" />
  <button type="submit">Save</button>
  <div>
    <small>
      <em>Pro tip: After save it, look at console!</em>
    </small>
  </div>
</Form><Form onSubmit={console.log}>
  <InputField field="somefield" label="Some Field" />
  <InputField field="OtherField" label="Other Field" />
  <button type="submit">Save</button>
  <div>
    <small>
      <em>Pro tip: After save it, look at console!</em>
    </small>
  </div>
</Form>

TextAreaField or isMultiline prop

You can use the TextAreaField component to an alternative for long texts.

It's a place for type a loooong text.

<TextAreaField
  label="It's a place for type a loooong text."
  field="mylongtext"
  shouldFitContainer
/><TextAreaField
  label="It's a place for type a loooong text."
  field="mylongtext"
  shouldFitContainer
/>

You also can force a InputField component to behave itself as a textarea. Just pass the isMultiline prop to it.

I'm pretending to be bigger.

<InputField
  label="I'm pretending to be bigger."
  field="faketextarea"
  isMultiline
/><InputField
  label="I'm pretending to be bigger."
  field="faketextarea"
  isMultiline
/>

Bugs

If you find any problem with this package, don't hesitate to open an issue on github.

Weird style bug in documentation

If you are seeing a distortion in some style, don't worry, it's only happening in docs and it will be fixed soon.

.css-1r0pe6c{color:inherit;-webkit-text-decoration:none;text-decoration:none;}.css-1r0pe6c:hover{-webkit-text-decoration:underline;text-decoration:underline;}Introduction

Introduction