1.1.2 • Published 3 years ago
react-persian-input v1.1.2
react-persian-input
Full customizable outlined text input for right to left languages.
Installation
Open a Terminal in your project's folder and run:
npm i react-persian-input
Usage
...
import {useState} from "react"
import FaInput from "react-persian-input"
const App = () => {
...
const [inputValue,setInputValue] = useState("")
const handleInputChange = (e) => {
setInputValue(e.target.value)
}
return(
...
<FaInput label="نام" value={inputValue} onInputChange={handleInputChange}/>
)
}
Props
Prop | Description | Type:DefaultValue |
---|---|---|
label | label of input | string |
width | width of input | string |
rtl | input text direction | bool:false |
value | value of text input | string |
labelStyle | style of label when it's not on focus | object |
labelOnFocusStyle | style of label when it's on focus | object |
borderStyle | style of border when it's not on focus | object |
borderOnFocusStyle | style of border when it's on focus | object |
inputStyle | Style of input | object |
moveLabelTop | move label to top when on focus (use negative number for move bottom) | string:25px |
moveLabelRight | move label to right when on focus (use negative number for move left) | string:10px |
scaleLabel | scale label when of focus | string: .94 |