Now Playing Mario

    @stnew/forms
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.3 • Public • Published

    @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

    Keywords

    none

    Install

    npm i @stnew/forms

    DownloadsWeekly Downloads

    1

    Version

    1.0.3

    License

    ISC

    Unpacked Size

    23.7 kB

    Total Files

    23

    Last publish

    Collaborators

    • returningsam
    • cabe
    • ryanhefner
    • artofrawr