estoy creando un input con react, la verdad esta quedando bien, el estilo es lo deseado, pero si al llamar al componente mas de una vez, pueden notar que hay problemas a la hora de mover el span
que simula ser el placeholder
se queda quieto y no retoma lo que tiene que hacer, simplemente no reacciona y se queda en su lugar, les dejo el código acá
import React from 'react'
import styled, { css } from 'styled-components'
import PropTypes from 'prop-types'
const ContainerInput = styled.div`
width: 15rem;
height: 3rem;
display: flex;
align-items: center;
border-radius: .5rem;
position: relative;
padding: .5rem;
border: solid 2px #fff;
`;
const ContainerPlaceholder = styled.span`
transition: all .3s;
background-color: #121212;
padding: .1rem;
color: #ffffff88;
${props => props.move && css`
transform: translate(0px, -130%);
font-size: 12px
`}
`;
const Input = styled.input`
width: 93%;
height: 100%;
background-color: transparent;
outline: none;
border: none;
position: absolute;
color: #fff
`;
const InputComponent = ({placeholder, type, onChange, value, name}) => {
const [ userFocus, setUserFocus] = React.useState(false)
const handleFocus = () => {
if(String(value).trim() !== "") return
setUserFocus(true)
}
const handleBlur = () => {
if(String(value).trim() !== "") return
setUserFocus(false)
}
return (
<ContainerInput>
<ContainerPlaceholder move={userFocus}>
{placeholder}
</ContainerPlaceholder>
<Input name={name} value={value} onChange={onChange} type={type} onFocus={handleFocus} onBlur={handleBlur} />
</ContainerInput>
)
}
InputComponent.prototype = {
placeholder: PropTypes.string.isRequired,
value: PropTypes.string.isRequired,
type: PropTypes.string.isRequired
}
export default InputComponent
les faltan algunas mejora al componente, pero recien lo estoy empezando, les dejo un link de codesanbox para que puedan verlo en accion