ReactJS Material Design UI Input Reusable Component Example
index.js
import React, { useState } from 'react';
import './style.css';
const MaterialInput = (props) => {
const [focus, setFocus] = useState(false);
return (
<div className="materialInput">
<label className={`label ${focus ? 'focus' : ''}`} style={{
top: 0,
lineHeight: 'none'
}}>{props.label}</label>
<div style={{
display: 'flex'
}}>
<input className="input"
type={props.type}
value={props.value}
onChange={props.onChange}
onFocus={(e) => {
setFocus(true)
}}
onBlur={(e) => {
if(e.target.value === ""){
setFocus(false)
}
}} />
{
props.rightElement ? props.rightElement : null
}
</div>
</div>
)
}
export default MaterialInput
Also you need to add stylesheet as given below
style.css
.materialInput{
width: 90%;
height: 30px;
border-bottom: 2px solid #2874f0;
position: relative;
margin-top: 20px;
}
.materialInput input{
width: 100%;
flex: 1;
outline: none;
border: none;
z-index: 1;
background: transparent;
line-height: 30px;
}
.materialInput .label{
position: absolute;
line-height: 30px;
color: grey;
z-index: 0;
font-size: 12px;
letter-spacing: 1px;
transition: all 0.1s ease-in-out;
}
.materialInput .label.focus{
top: -20px !important;
}