reactjs-floating-label-inputs
TypeScript icon, indicating that this package has built-in type declarations

3.3.2 • Public • Published

reactjs-floating-label-inputs

ReactJs Component: Inputs with floating labels

NPM JavaScript Style Guide

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

Readme

Keywords

none

Package Sidebar

Install

npm i reactjs-floating-label-inputs

Weekly Downloads

16

Version

3.3.2

License

MIT

Unpacked Size

2.4 MB

Total Files

15

Last publish

Collaborators

  • mortezadvlp