volkeno-inputify

Volkeno Inputify is a ReactJS module that harmonizes the management of form components.

Install

npm install --save volkeno-inputify

Usage

import React, { Component } from 'react'

import { Inputify } from 'volkeno-inputify'
import 'volkeno-inputify/dist/index.css'

class Example extends Component {
  render() {
    return  <Inputify
              {...props}
            />
  }
}

Configuration - Props

| Property | Type | Default | Description | | ------------------------ | :------: | :-----: | ---------------------------------------------------------------------------------------- | | model | string | null | Input model. Value can be 'input', 'select', 'file', 'textarea', 'toggle_switch' | | inputType | string | null | Input type. Value can be 'text', 'checkbox', 'radio', 'file' | inputName | string | null | Input name property (Required) | inputValue | --- | null | Input value property | callBack | function | void | This is the method that allows you to retrieve the value of all Inputs except select | selectCallback | function | void | This is the method that allows you to retrieve the value of select | disabled | boolean | false | Input disabled property | readOnly | boolean | false | Input readonly property | placeholder | string | null | Input placeholder property | selectOption | Array | null | Array of select option label and value | selectPlaceholder | string | null | Select placeholder | className | string | null | Input custom className | inputLabel | string | null | Input label | inputLabelClassName | string | null | Input custom label container className | overridedID | string | null | Input custom ID value | inputHasIcon | boolean | false | Flag to add icon on input | iconInInput | string | null | Icon tag for example for Fontawesome '' | inputIconPosition | string | null | Icon position on the Input tag. Value can be 'left' or 'right' | inputCheckboxSize | Array | null | Checkbox tag size. It is an array containing the width and height values of checkbox size | inputRadioSize | Array | null | Radio tag size. It is an array containing the width and height values of radio size | hasMutliple | boolean | false | Define if has multiple files on Input file type | inputFileType | string | default | Define the type of Input file. Value can be 'default' or 'dnd' (for drag and drop) | textareaRows | number | null | Textarea rows size | textareaCols | number | null | Textarea cols size | textareaContentSizeLimit | string | null | Textarea content size limit value | inputSwitchValue | string | null | Input switch value property | switchCheckedStatus | boolean | false | Input switch checked proprety status | inputContainerClassName | string | null | Input switch parent container custom className | inputSwitchHasLabel | boolean | null | Define if Input switch have label | inputSwitchLabelPosition | string | null | Define Input switch label position. Value can be 'left-side-to-side', 'right-side-to-side', 'top-before-input-switch', 'bottom-after-input-switch' | inputBorderRadiusValue | string | null | Define Input border radius value | inputIconContainerBg | string | null | Define Input Icon parent container background value | isRequired | boolean | false | Define if Input value is required | dndInputLabel | string | null | Drag and Drop input file label value | inputStyleDeclination | string | default | Input style declinaison. Value can be 'defaut', 'primary', 'success', 'warning', 'danger', 'volkan' | otherProps | any | null | Can add all others input properties

License

MIT © VolkenoMakers