10 More Conditional Rendering Examples in CSS and React.js 🚀 (Part 2)

By coursity / September 7, 2024

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

Related

Discover more from Coursity

Subscribe to get the latest posts sent to your email.

Leave a Comment Cancel Reply

Overlaxed's sub brand, cloudy storage, specializes in cloud storage. Privacy, cookie & data policy.