@stnew/forms NPM

@stnew/forms

Modular form components with some pre-configured form inputs for common use-cases.

npm install @stnew/forms

FormInput

A controlled component that composes an input element with a wrapper element and an optional and extendable indicator component. The indicator component is meant to provide visual indication of valid/invalid states.

import { FormInput } from '@stnew/forms';

Controlled Props	Type	Desc
type	`string`	type of the input field
value	`string`	current value of the input field
invalid	`boolean`	should be true if the current value is invalid
validated	`boolean`	should be true if the current value is valid

General Props	Type	Desc
id	`string`	id of the input element
name	`string`	name of the input element
className	`string`	class of the input element
required	`boolean`	toggle to make the input field required
autoFocus	`boolean`	toggle to make the input field focused by default
placeholder	`string`	placeholder text for the input field
customInputIndicator	`ReactNode`	Element to be nested in the existing indicator `div` element
disableIndicator	`boolean`	if `true`, the indicator `div` element will not be rendered
onChange	`function`	onChange callback function
onFocus	`function`	onFocus callback function
onBlur	`function`	onBlur callback function

ValidatedInput

Component that wraps FormInput and handles validation and state management.

import { ValidatedInput } from '@stnew/forms';

Props	Type	Desc
onValid	`function`	callback for when the input's value is valid
onInvalid	`function`	callback for when the input's value is invalid
onEmpty	`function`	callback for when the input's value is empty
validator	`function`	function that takes in the value of the input and returns true if valid, false otherwise
type	`string`	type of the input element
input	`object`	object will all attributes listed under 'General Props' for FormInput

Others

The package also includes some extentions of ValidatedInput that have built-in validation functions for common use cases. Each of these are the same, but with different validation functions.

EmailInput
ZipCodeInput

import { EmailInput, ZipCodeInput } from '@stnew/forms';

Props	Type	Desc
onValid	`function`	callback for when the input's value is valid
onInvalid	`function`	callback for when the input's value is invalid
onEmpty	`function`	callback for when the input's value is empty

also includes all props listed under 'General Props' for FormInput

lodash

@everything-registry/sub-chunk-874

1.0.3

5 years ago