Enhancing a Login/Register Application: Introducing Styled Components with React, Node.js, and Postgres | From Beginner to Advanced

styled-component

Introduction:

Discover the power of Styled Components in our Login/Register app! From beginners to advanced users, learn to integrate Styled Components with React, Node.js, and Postgres for dynamic, encapsulated styles. Elevate your projects with this tutorial!

Note:
This tutorial continues our project on the Login application with React, Node.js, and Postgres. Feel free to integrate it into your existing project or fork the repository provided here.

Overview:

In this tutorial, we’ll integrate Styled Components into our existing React, Node.js, and Postgres login application. Styled Components offer a powerful solution for styling React components, providing encapsulated, dynamic styles within a component-based architecture. We’ll cover setup, converting existing styles, dynamic styling, theming, optimization, and more. Get ready to elevate your project with Styled Components!

Step 1: Project Setup and Dependencies

Install Styled Components:

· navigate to the frontend project and run the following command:

npm install styled-components

Note:
Ensure that you have a react project setup already or that you have already forked the project from gihub.

Step 2: Styling Components with Styled Components

· Navigate to the “login” folder and create a new folder named “loginStyles” to manage the styles for the login component.

cd src; cd pages; cd login && touch loginStyles.ts

Note:
The command in the frontend folder terminal above will generate the file loginStyles.ts. Alternatively, you can manually create the file by navigating to the login folder and adding a new file.

· Add the following styles to the loginStyles file.

import styled from "styled-components";

// Define the interface for the Button component props
interface IButton {
  primary?: string; // Optional primary prop of type string
}

// Define a styled button component with styled-components
export const Button = styled.button<IButton>`
  background-color: ${(props) => (props.primary ? "#007bff" : "white")}; // Set background color based on primary prop
  color: ${(props) => (props.primary ? "white" : "#007bff")}; // Set text color based on primary prop
  border: 2px solid #007bff; // Set border style
  padding: 10px 20px; // Set padding
  border-radius: 5px; // Set border radius
  cursor: pointer; // Set cursor style to pointer

  &:hover {
    background-color: ${(props) => (props.primary ? "#0056b3" : "#e9ecef")}; // Change background color on hover
  }
`;

// Define a styled container component with styled-components
export const Container = styled.div`
  background-color: #f8f9fa; // Set background color
  width: 100%; // Set width to 100%
  padding: 20px; // Set padding
  border-radius: 5px; // Set border radius
`;

· Import the styled component into the Login.tsx file. Open the Login.tsx file and update with the following code.

import React, { FC } from "react";
import { Form } from "react-bootstrap";
import { Formik, Field, FormikProps, FormikHelpers } from "formik";
import * as Yup from "yup";
import { Button, Container } from "./loginStyles";

// Define the interface for form values
interface FormValues {
  email: string;
  password: string;
}

const Login: FC = () => {
  // Define validation schema using Yup
  const validationSchema = Yup.object().shape({
    email: Yup.string().required("Email is required"),
    password: Yup.string().required("Password is required"),
  });

  // Define form submit handler
  const handleSubmit = (
    values: FormValues,
    { setSubmitting }: FormikHelpers<FormValues>
  ) => {
    // Handle form submission
    //console.log(values);
    setSubmitting(false);
  };

  return (
    <Container className="mx-auto max-w-md space-y-6">
      <div className="space-y-2 text-center">
        <h1 className="text-3xl font-bold">Login in</h1>
        <p className="text-gray-500 dark:text-gray-400">
          Enter your details to get started.
        </p>
      </div>
      {/* Formik form wrapper */}
      <Formik
        initialValues={{ email: "", password: "" }}
        validationSchema={validationSchema}
        onSubmit={handleSubmit}
      >
        {/* Render form inside Formik */}
        {({ handleSubmit }: FormikProps<FormValues>) => (
          <Form className="space-y-4" onSubmit={handleSubmit}>
            {/* Email input field */}
            <Form.Group className="mb-3" controlId="email">
              <Form.Label>Email</Form.Label>
              <Field type="email" name="email" as={Form.Control} />
            </Form.Group>
            {/* Password input field */}
            <Form.Group className="mb-3" controlId="password">
              <Form.Label>Password</Form.Label>
              <Field type="password" name="password" as={Form.Control} />
            </Form.Group>
            {/* Submit button */}
            <Button primary="true" type="submit" className="w-full">
              Sign In
            </Button>
          </Form>
        )}
      </Formik>
    </Container>
  );
};

export default Login;

· Create a global styles file named `globalStyles.ts` within the `src` directory. Insert the following code:

import styled from "styled-components";

export const GlobalStyle = styled.div`
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
  background-color: #A87676;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  
`;

· Update the `App.tsx` file with the following code:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import AppRoutes from "./routes/index.route";
import { GlobalStyle } from "./globalStyles";

const App = () => {
  return (
    <GlobalStyle>
      <AppRoutes />
    </GlobalStyle>
  );
};

export default App;

Conclusion:

In conclusion, styled-components offer a powerful way to style React components with the flexibility of CSS-in-JS. They allow for the creation of reusable and encapsulated styling, making it easier to maintain and manage styles within your application. With styled-components, you can write CSS directly within your JavaScript code, which enhances component portability and reduces the need for separate CSS files. Additionally, styled-components support dynamic styling based on props and theme context, enabling responsive and theme-aware designs. Overall, styled-components are a valuable tool for building modern and stylish user interfaces in React applications.

Hopefully, I have been able to help you achieve your aim, share with a friend who could benefit and give me a like and subscribe to help me help more.