ReactJs Component: Inputs with floating labels
npm install --save reactjs-floating-label-inputs
Visit this link: https://simacoders.ir/features/#ReactJsFloatingLabelInputs
In new version, required property is added to components.
import { MyComponent1, MyComponent2 } from 'reactjs-floating-label-inputs'
import 'reactjs-floating-label-inputs/dist/index.css'
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 |
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 |
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. |
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. |
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 |
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 |
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. |
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 |
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. |
MIT © mortezadvlp