@re-flex/ui/Hidden/index.js

Re-Flex ui library

import { styled } from "@re-flex/styles";
const HiddenBase = styled("div")((props) => {
    let style = {};
    const breakpoints = Object.entries(props.theme.breakpoints.values);
    for (let [size, width] of breakpoints) {
        if (size + "Up" in props) {
            style[`@media screen and (min-width: ${width}px)`] = {
                display: "none",
            };
        }
        else if (size + "Down" in props) {
            style[`@media screen and (max-width: ${width}px)`] = {
                display: "none",
            };
        }
    }
    return style;
});
export default HiddenBase;