formik_typescript_ui v2.0.4

Formik TypeScript UI

Overview

Formik TypeScript UI, contains simple HTML form fields wrapped with Formik and written in TypeScript.

Installation

npm install --save formik_typescript_ui

Change Log

2.0.4 - 2019-12-12

This release contains breaking changes from the previous version.

Changed

• index.ts components export
• HandleChange type on TagsInputField was renamed to HandleTagsChange

Fixed

• React scripts dependencies
• Dependencies vulnerabilities

Components

CheckboxField

The CheckboxField component renders a simple HTML <input> of the type checkbox and its respective <label>.

Props

CheckboxGroup

The CheckboxGroup component renders a list of <CheckboxField /> from the given options.

CheckOptionType

interface CheckOptionType {
  id?: string;
  label: string;
  name: string;
}

Props

DatePickerField

The DatePickerField component renders a simple HTML <input> of the type date.

Props

RadioButtonField

The RadioButtonField component renders a simple HTML <input> of the type radio and its respective <label>.

Props

RadioButtonGroup

The RadioButtonGroup component renders a list of <RadioButtonField /> from the given options.

RadioOptionType

interface RadioOptionType {
  id: string;
  label: string;
}

Props

SelectField

The SelectField component uses react-select to render the select element and it's respective options. For more information on the react-select library, click here.

OptionType

interface OptionType {
  label: string;
  value: string;
}

Props

TagsInputField

The TagsInputField component uses react-tagsinput to render the input element and it's respective tags. For more information on the react-tagsinput library, click here.

InputProps

The InputProps, can be exported from the react-tagsinput library or defined as follows:

interface InputProps {
  className: string;
  placeholder: string;
}

Default values for inputProps:

const defaultInputProps: InputProps = {
  className: 'react-tagsinput-input',
  placeholder: 'Add a tag',
}

PasteSplit

The PasteSplit type, can be defined as follows:

  type PasteSplit = (text: string) => string[];

  const defaultPasteSplit: PasteSplit = (text: string) => (
    text.split(' ').map(word => word.trim());
  );

TagProps

The TagProps, can be exported from the react-tagsinput library or defined as follows:

interface TagProps {
  className: string;
  classNameRemove: string;
}

Default values for tagProps:

const defaultTagProps: TagProps = {
  className: 'react-tagsinput-tag',
  classNameRemove: 'react-tagsinput-remove',
}

Props

TextareaField

The TextareaField component renders a simple HTML <textarea>.

Props

TextField

The TextField component renders a simple HTML <input>.

Props

type OnChange = (event: React.ChangeEvent<HTMLInputElement>) => void;
type OnInput = (event: React.ChangeEvent<HTMLInputElement>) => void;
type RefType = string | ((instance: HTMLInputElement | null) => void) | React.RefObject<HTMLInputElement> | null | undefined;

License

MIT © Romina Manzano