Reactjs-floating-label-inputs NPM

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, dark mode is added to components. You can set dark={true} to active dark mode.

Usage

Import

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

General properties

NormalInputFloatingLabel Component

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

Additional properties:

DateInputFloatingLabel Component

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

Additional properties:

EmailInputFloatingLabel Component

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

Additional properties:

PasswordInputFloatingLabel Component

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

Additional properties:

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:

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:

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:

CheckBoxInputFloatingLabel Component

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

Additional properties: