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

Components

CheckboxField

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

Props

Name	Type	Default Value	Description
className	string	null	Adds a custom class to the <input> element
classNameLabel	string	null	Adds a custom class to the <label> element
disabled	boolean	false	Disables the <input> element
id	string	null	Sets an id for the <input> element. If not specified, the name would be used instead
label	string	required	Sets the text for the <label> element
labelStyle	object	{}	Adds custom inline style to the <label> element
name	string	required	Sets the name of the <input> element
style	object	{}	Adds custom inline style to the <input> element

CheckboxGroup

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

CheckOptionType

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

Props

Name	Type	Default Value	Description
className	string	null	Adds a custom class to each <input> element
classNameLabel	string	null	Adds a custom class to each <label> element
labelStyle	object	{}	Adds custom inline style to each <label> element
options	CheckOptionType[]	required	Sets the required props for the <CheckboxField /> components
style	object	{}	Adds custom inline style to each <input> element

DatePickerField

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

Props

Name	Type	Default Value	Description
className	string	null	Adds a custom class to the <input> element
disabled	boolean	false	Disables the <input> element
id	string	null	Sets an id for the <input> element. If not specified, the name would be used instead
maxDate	string	null	Sets the maximun date that can be selected. If not in the correct format AAAA-MM-DD, this validation won't have any effects
minDate	string	null	Sets the minimun date that can be selected. If not in the correct formar AAAA-MM-DD, this validation won't have any effects
name	string	required	Sets the name of the <input> element
style	object	{}	Adds custom inline style to the <input> element

RadioButtonField

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

Props

Name	Type	Default Value	Description
className	string	null	Adds a custom class to the <input> element
classNameLabel	string	null	Adds a custom class to the <label> element
disabled	boolean	false	Disables the <input> element
id	string	required	Sets an id for the <input> element
label	string	null	Sets the text for the <label> element
labelStyle	object	{}	Adds custom inline style to the <label> element
name	string	required	Sets the name of the <input> element
style	object	{}	Adds custom inline style to the <input> element

RadioButtonGroup

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

RadioOptionType

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

Props

Name	Type	Default Value	Description
className	string	null	Adds a custom class to each <input> element
classNameLabel	string	null	Adds a custom class to each <label> element
labelStyle	object	{}	Adds custom inline style to each <label> element
name	string	required	Sets the name for all the <input> elements
options	RadioOptionType[]	required	Sets the required props for the <RadioButtonField /> components
style	object	{}	Adds custom inline style to each <input> element

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

Name	Type	Default Value	Description
autofocus	boolean	false	Sets wether the control is focused or not when the component is mounted
className	string	null	Adds a custom class to the <Select /> component
id	string	null	Sets an id for the <SelectContainer />. If not specified, the name would be used instead
isDisabled	boolean	false	Sets wether the <Select /> is disabled or not
isLoading	boolean	false	Sets wether the <Select /> is loading its content (asynchronous) or not
isMulti	boolean	false	Sets wether the <Select /> allows for multiple selection or not
isSearchable	boolean	false	Sets wether the options can be searched or not
name	string	required	Sets the name for the <input> element
options	OptionType[]	required	Sets the options for the <Select /> component
placeholder	string	null	Sets the placeholder for the <input> element
style	object	{}	Style modifier methods as described on react-select docs

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

Name	Type	Default Value	Description
addOnBlur	boolean	false	Adds a tag on the input blur event
addOnPaste	boolean	false	Adds a tag on HTML5 paste
className	string	react-tagsinput	Adds a custom class to the component's wrapper
disabled	boolean	false	Disables the <input> element
focusedClassName	string	react-tagsinput--focused	Adds a custom class to the component's wrapper when it's focused
inputProps	InputProps	defaultInputProps	Props passed down to the <input> element
maxTags	number	-1	Sets a maximum amount of tags. Use -1 for infinite tags
name	string	required	Sets the name for the component
pasteSplit	PasteSplit	defaultPasteSplit	Function that splits the pasted text
tagProps	TagProps	defaultTagProps	Props passed down to every tag component

TextareaField

The TextareaField component renders a simple HTML <textarea>.

Props

Name	Type	Default Value	Description
className	string	null	Adds a custom class to the <textarea> element
disabled	boolean	false	Disables the <textarea> element
id	string	null	Sets an id for the <textarea> element. If not specified, the name would be used instead
name	string	required	Sets the name for the <textarea> element
placeholder	string	null	Sets the placeholder for the <textarea> element
style	object	{}	Adds custom inline style to the <textarea> element

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;

Name	Type	Default Value	Description
className	string	null	Adds a custom class to the <input> element
disabled	boolean	false	Disables the <input> element
forwardRef	RefType	undefined	Sets a ref for the <input> element.
id	string	null	Sets an id for the <input> element. If not specified, the name would be used instead
name	string	required	Sets the name for the <input> element
max	number	undefined	Sets the max for the <input> element
maxLength	number	undefined	Sets the maxLength for the <input>
min	number	undefined	Sets the min for the <input> element
minLength	number	undefined	Sets the minLength for the <input> element
onChange	OnChange	undefined	Sets the onChange function for the <input> element. When undefined, it takes the formik field default onChange function.
onInput	OnInput	undefined	Sets the onInput function for the <input> element
onKeyDown	OnKeyDown	undefined	Sets the onKeyDown function for the <input> element
pattern	string	undefined	Sets the pattern for the <input> element
placeholder	string	null	Sets the placeholder for the <input> element
style	object	{}	Adds custom inline style to the <input> element
type	string	'text'	HTML types: text, email, password and number

License

MIT © Romina Manzano