React:Input label up in style component - html

Question

I am using React-typescript in my app. For styling I am using Style-components. I am really new Style-components. Lots of syntax are new to me. I normally use css. I have decided I will convert my css into Style-component. So I can use it different components. I have created one Wrapper components where I put my Label with style components. I also created two components one is Input and another one is Textarea. I want to use Wrapper components both Input and Textarea components. I followed one youtube tutorial. Where I converted html and css into react-css. which works fine as expected. But I am struggling to convert react css into style-components. specially the focus and valid option. I really don't know how to use them. Also I am facing difficulties when label size vary. It takes sometimes too left or sometimes too right. Here is the Image:
.
I really don't know how to fix those issues.
This is my Youtube tutorial based on React component
import React from 'react'
import './new.css'
const Test = () => {
return (
<div className="main">
<div className="input-group">
<input type="text" id="firstname" className="inputField" autoComplete="off" required />
<label htmlFor="name" className="labels">First name</label>
</div>
</div>
)
}
export default Test;
This is the css
.main{
position: relative;
}
.inputField{
outline: none;
padding: 16px 22px;
border: 1px solid #dadce0;
font-size:18px;
border-radius:5px;
}
.inputField:focus{
border: 2px solid royalblue;
}
.labels{
color: #8d8d8d;
position: absolute;
top: 27px;
left: 55px;
background: #ffffff;
transition: 300ms;
transform: translate(-50%, -50%);
}
.inputField:valid + .labels{ // I don't know how to use this `Valid` in style-component
top: -1px;
padding: 0 3px;
font-size:14px;
color: #8d8d8d;
}
.inputField:focus + .labels { // I don't know how to use this `focus` in style-component
top: -1px;
padding: 0 3px;
font-size:14px;
color: royalblue;
transition: 300ms;
}
This is the wrapper component where I used Label styling with style-components and others requirements.
import React from 'react';
import styled from 'styled-components';
const Container = styled.div`
position: relative;
`
const Label = styled.label`
display: block;
color: #8d8d8d;
background: #ffffff;
position: absolute;
left: 50px;
top: 29px;
pointer-events: none;
transition: 300ms;
transform: translate(-50%, -50%);
`
const Error = styled.p`
color: red;
`
const Description = styled.p`
color: blue;
`
export interface IInputWrapperProps {
label?: string;
required?: boolean;
description?: string;
error?: string;
wrapperStyle?: React.CSSProperties;
children?: JSX.Element;
}
export default ({
label, error, description, children, required, wrapperStyle
}: IInputWrapperProps) => {
return (
<ErrorBoundary id="InputWrapperErrorBoundary">
<div style={wrapperStyle}>
<Container>
<Label>
{label} {required && <span style={{ color: 'red' }}> *</span>}
</Label>
{children}
</Container>
{description && <Description>{description}</Description>}
{error && <Error>{error}</Error>}
</div>
</ErrorBoundary>
);
}
This is my Input component styling with style-componenents
import React, { useState, memo } from "react";
import styled from "styled-components";
import InputWrapper, { IInputWrapperProps } from "../wrapper";
import { Label } from "../wrapper"
const Input = styled.input.attrs(() => ({
className: 'text-input'
}))`
border: 1px solid #dadce0;
background: #fdfdfd;
font-size:18px;
border-radius: 5px;
box-shadow: none;
padding: 16px 30px;
outline: none;
&:focus {
border: 2px solid royalblue;
}
${Label}:focus & {
top: -12px;
padding: 0 3px;
font-size:14px;
color: royalblue;
transition: 300ms;
}
`
export interface ITextInputProps extends IInputWrapperProps {
value: string | undefined;
onChange: (i: string) => void;
}
export default memo(({
value, onChange, ...wrapperProps
}: ITextInputProps) => {
return (
<InputWrapper
{...wrapperProps}
>
<div>
<Input
value={value}
onChange={e => onChange(e.target.value)}
/>
</div>
</InputWrapper>
)
});
This is the parent component where I am rendering those two input fields
<InputTesting
label="Frist Name"
value={undefined}
onChange={(i) => console.log(i)}
/>
<br></br>
<br></br>
<InputTesting
label="Hello"
value={undefined}
onChange={(i) => console.log(i)}
/>

Answer 1

Before I answer the question, I need to say two things: first, I couldn't understand so much about your styled-components code, so I'll just transform your react/CSS code to react-typescript/styled-component. Second, I didn't get what you mean by "difficulties when label size varies", so I'm not focusing on this in the answer. That been said, let's go to the code.
Input.tsx
import React from 'react';
import styled from 'styled-components';
interface InputProps extends React.InputHTMLAttributes<HTMLInputElement>{
id: string;
label: string;
}
const InputGroup = styled.div`
position: relative;
`;
const InputLabel = styled.label`
color: #8d8d8d;
position: absolute;
top: 27px;
left: 55px;
background: #ffffff;
transition: 300ms;
transform: translate(-50%, -50%);
`;
const InputField = styled.input`
outline: none;
padding: 16px 22px;
border: 1px solid #dadce0;
font-size: 18px;
border-radius: 5px;
&:focus
{
border: 2px solid royalblue;
}
&:valid + ${InputLabel}
{
top: -1px;
padding: 0 3px;
font-size:14px;
color: #8d8d8d;
}
&:focus + ${InputLabel}
{
top: -1px;
padding: 0 3px;
font-size:14px;
color: royalblue;
transition: 300ms;
}
`;
const Input: React.FC<InputProps> = ({ id, label, ...rest }) => {
return (
<InputGroup>
<InputField id={id} {...rest} />
<InputLabel htmlFor={id} >{label}</InputLabel>
</InputGroup>
);
}
export default Input;
The idea here is to create an input component that already has a label inside it. Initially, I create an interface called InputProps which extends all attributes from a common InputElement and forces the parent component to put an id and a label attribute.
Them I used styled-components to copy all styles from the youtube guy. To put pseudo-classes on styled-components you have to use a sass' feature called parent selector. Using the ampersand, you can refer to the parent selector. Another thing you have to use is styled-components reference. This feature will allow you to refer to the styled-label in the code.
Now that you've created the Input component, let's use it on the App.
App.tsx
import React from 'react';
import Input from './Input';
function App() {
return (
<>
<Input required type="text" label="First Name" id="first-name" />
<Input required type="text" label="Hello" id="hello" />
</>
);
}
export default App;
This is the final result.