reactjs-floating-label-inputs

ReactJs Component: Inputs with floating labels

Install

npm install --save reactjs-floating-label-inputs

Online Demo

Visit this link: https://simacoders.ir/features/#ReactJsFloatingLabelInputs

What is new?

In new version, required property is added to components.

Usage

Import

import { MyComponent1, MyComponent2 } from 'reactjs-floating-label-inputs'
import 'reactjs-floating-label-inputs/dist/index.css'

General properties

Property	Type	Description
className	String	Apply your desire class globally
label	String	Label of the component
disabled	boolean	Disable component
labelType	string/number	Switch label type between normal type and mui type
dark	boolean	Switch visual mode to dark/light
minHeight	number	minimum height of component (should be greater than 35)
required	boolean	Checking required in for validation
onChangeValue	function	Emit when value is changed in the component
onFocus	function	Emit when component got focus
onBlur	function	Emit when component lost focus

NormalInputFloatingLabel Component

const [simpleData, setSimpleData] = useState('')
<NormalInputFloatingLabel className='' label='Simple Input' type='text'
          value={simpleData} onChangeValue={(val) => setSimpleData(val)} />

Additional properties:

Property	Type	Description
lineCount	Number	Convert simple input to multiline textarea if lineCount > 1
type	String	text for normal text IntNumber for just integer numbers FloatNumber for just decimal numbers
value	any	Value of the component
icon	component	Svg is recomended. It show your specified icon beside the component.
iconClickable	boolean	Determin that icon could be clicked or not
onIconClick	function	Emit when icon is clicked

DateInputFloatingLabel Component

const [dateData, setDateData] = useState('')
<DateInputFloatingLabel className='' label='Date Input'
          value={dateData} onChangeValue={(val) => setDateDat(val)} />

Additional properties:

Property	Type	Description
value	String	Date in 'YYYY/MM/DD' format (Empty string means today)
shamsiMode	boolean	Switch between Gregorian and Shamsi modes
persianLanguage	boolean	If true, it translate and convert texts to Persian
hasIcon	boolean	Show or Hide icon for the component
icon	component	Svg is recomended. It show your specified icon beside the component. To show default icon, remove this property or let it null.

EmailInputFloatingLabel Component

const [emailData, setEmailData] = useState('')
<EmailInputFloatingLabel className='' label='Email Input'
          value={emailData} onChangeValue={(val) => setEmailData(val)} />

Additional properties:

Property	Type	Description
value	String	Email address
hasIcon	boolean	Show or Hide icon for the component
icon	component	Svg is recomended. It show your specified icon beside the component. To show default icon, remove this property or let it null.
onValidate	function	Validate entered email address after that it lost focus and return result as a boolean value.

PasswordInputFloatingLabel Component

const [passwordData, setPasswordData] = useState('')
<PasswordInputFloatingLabel className='' label='Password Input'
          value={passwordData} onChangeValue={(val) => setPasswordData(val)} />

Additional properties:

Property	Type	Description
value	String	Password
hasIcon	boolean	Show or Hide 'Eye' icon for the component

SelectInputFloatingLabel Component

const [selectData, setSelectData] = useState('')
<SelectInputFloatingLabel className='' label='Select Input' colorPrimary='#0d6efd'
          value={selectData} onChangeValue={(val) => setSelectData(val)}
          options={[{value: 0, label: 'Item1'}, {value: 1, label: 'Item2'}, {value: 2, label: 'Item3'},
                    {value: 3, label: 'Item4'}, {value: 4, label: 'Item5'}, {value: 5, label: 'Item6'}]} />

Additional properties:

Property	Type	Description
options	array of {value, label} object	Options of the component
colorPrimary	color	Put the component in harmony with your theme

PhoneInputFloatingLabel Component

const [phoneData, setPhoneData] = useState({countryCode: 'IR', value: ''})
<PhoneInputFloatingLabel className='' label='Phone Input'
          countryValue={phoneData.countryCode} phoneValue={phoneData.value}
          onChangeCountryValue={(val) => setPhoneData({...phoneData, countryCode: val})}
          onChangePhoneValue={(val) => setPhoneData({...phoneData, value: val})} />

Phone data should be destructured to two section: countryCode (countryValue) and phone number (phoneValue).

You can have list of countries by calling getCountriesList() function.

Additional properties:

Property	Type	Description
countryValue	String	Country code like 'IR' or 'US'
phoneValue	String	Phone number value (Without country code)
useDialCode	boolean	If this property is `true`, PhoneInput works with country dial code (e.g. +98), otherwise it works with country value (e.g. IR)
onChangeCountryValue	function	Emit when countryValue is changed in the component.
onChangePhoneValue	function	Emit when phoneValue is changed in the component.
onValidate	function	Validate entered phone number after that it lost focus and return result as a boolean value.

QuestionInputFloatingLabel Component

const [questionData, setQuestionData] = useState(false)
<QuestionInputFloatingLabel className='' title='Question Input'
          trueOption='Yes' falseOption='No'
          value={questionData} onChangeValue={(val) => setQuestionData(val)} />

It creates a question with two option to answer.

Additional properties:

Property	Type	Description
trueOption	String	One of the possible answers
falseOption	String	Another possible answer

CheckBoxInputFloatingLabel Component

const [checkData, setCheckData] = useState(false)
<CheckBoxInputFloatingLabel className = '' text='Check Box Input' disabled={disableAll}
          isChecked={checkData} onChangeChecked={(val) => setCheckData(val)} />

Additional properties:

Property	Type	Description
isChecked	boolean	Checked status
onChangeChecked	function	Emit when isChecked value is changed in the component.

License

MIT © mortezadvlp