DEV Community

Cover image for 10 Conditional Rendering Examples in CSS and React.js ๐Ÿš€ (Part 2)
Pratik Tamhane
Pratik Tamhane

Posted on • Updated on

10 Conditional Rendering Examples in CSS and React.js ๐Ÿš€ (Part 2)

In this follow-up post, we'll continue exploring more ways to implement conditional rendering in both CSS and React.js. These techniques will help you build dynamic and responsive UIs with ease!

1. Conditional Rendering using CSS Variables

You can conditionally change styles in CSS using CSS variables and update them in your React components.

/* CSS */
:root {
  --bg-color: white;
}

.conditional-div {
  background-color: var(--bg-color);
}

.dark-mode {
  --bg-color: black;
  color: white;
}

Enter fullscreen mode Exit fullscreen mode

Example (React.js):

const Example1 = ({ isDarkMode }) => {
  return (
    <div className={isDarkMode ? "dark-mode conditional-div" : "conditional-div"}>
      Conditional CSS Variables based on dark mode!
    </div>
  );
};

Enter fullscreen mode Exit fullscreen mode

2. Conditional Rendering with Pseudo-Classes in CSS

You can conditionally style elements in CSS based on hover, focus, and active states using pseudo-classes.

/* CSS */
.conditional-button {
  background-color: blue;
  color: white;
}

.conditional-button:hover {
  background-color: red;
}

Enter fullscreen mode Exit fullscreen mode

Example (React.js):

const Example2 = () => {
  return <button className="conditional-button">Hover to Change Color</button>;
};

Enter fullscreen mode Exit fullscreen mode

3. Conditional Rendering with CSS Animations

You can conditionally apply animations to elements using class changes.

/* CSS */
@keyframes slideIn {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

.slide-in {
  animation: slideIn 1s forwards;
}

Enter fullscreen mode Exit fullscreen mode

Example (React.js):

const Example3 = ({ shouldSlideIn }) => {
  return (
    <div className={shouldSlideIn ? "slide-in" : ""}>
      I slide in based on condition!
    </div>
  );
};

Enter fullscreen mode Exit fullscreen mode

4. Conditional Rendering with :nth-child Selector in CSS

You can conditionally apply styles to specific children of an element using :nth-child.

/* CSS */
.parent-div > div:nth-child(odd) {
  background-color: lightblue;
}

Enter fullscreen mode Exit fullscreen mode

Example (React.js):

const Example4 = () => {
  return (
    <div className="parent-div">
      <div>Item 1</div>
      <div>Item 2</div>
      <div>Item 3</div>
    </div>
  );
};

Enter fullscreen mode Exit fullscreen mode

5. Conditional Rendering with React Portals

React Portals allow you to conditionally render elements outside the DOM hierarchy of the parent component

import ReactDOM from "react-dom";

const Example5 = ({ showModal }) => {
  return showModal
    ? ReactDOM.createPortal(
        <div className="modal">This is a modal!</div>,
        document.getElementById("modal-root")
      )
    : null;
};

Enter fullscreen mode Exit fullscreen mode

6. Conditional Rendering with Multiple Classes in React

You can conditionally apply multiple classes to an element.

const Example6 = ({ isActive, isError }) => {
  return (
    <div className={`${isActive ? "active" : ""} ${isError ? "error" : ""}`}>
      This div has conditional classes!
    </div>
  );
};

Enter fullscreen mode Exit fullscreen mode
/* CSS */
.active {
  background-color: green;
}

.error {
  border: 2px solid red;
}

Enter fullscreen mode Exit fullscreen mode

7. Conditional Rendering with Media Queries in CSS

You can use media queries to conditionally render styles based on the screen size.

/* CSS */
@media (max-width: 600px) {
  .mobile-view {
    background-color: yellow;
  }
}

Enter fullscreen mode Exit fullscreen mode

Example (React.js):

const Example7 = () => {
  return <div className="mobile-view">This div changes color on small screens!</div>;
};

Enter fullscreen mode Exit fullscreen mode

8. Conditional Rendering with React Fragments and Loops

You can conditionally render a list of items in React using loops and fragments.

const Example8 = ({ items }) => {
  return (
    <>
      {items.length > 0 ? (
        items.map((item, index) => <p key={index}>{item}</p>)
      ) : (
        <p>No items to show</p>
      )}
    </>
  );
};

Enter fullscreen mode Exit fullscreen mode

9. Conditional Rendering with Styled-Components

Using styled-components, you can conditionally apply styles within your React components.

import styled from "styled-components";

const Box = styled.div`
  background-color: ${(props) => (props.isPrimary ? "blue" : "gray")};
  padding: 10px;
  color: white;
`;

const Example9 = ({ isPrimary }) => {
  return <Box isPrimary={isPrimary}>This is a styled component</Box>;
};

Enter fullscreen mode Exit fullscreen mode

10. Conditional Rendering using Lazy Loading in React

With React.lazy, you can conditionally load components only when needed, improving performance.

import React, { Suspense } from "react";
const LazyComponent = React.lazy(() => import("./LazyComponent"));

const Example10 = ({ shouldLoad }) => {
  return (
    <div>
      {shouldLoad ? (
        <Suspense fallback={<div>Loading...</div>}>
          <LazyComponent />
        </Suspense>
      ) : (
        <p>No component to load</p>
      )}
    </div>
  );
};

Enter fullscreen mode Exit fullscreen mode

shop Link : https://buymeacoffee.com/pratik1110r/extras

LinkedIn : https://www.linkedin.com/in/pratik-tamhane-583023217/

Behance : https://www.behance.net/pratiktamhane

Top comments (0)