🦜 on the web

После того как я погрузился в возможности container queries, container units, а также fluid-типографику с clamp() и minmax(), возник вопрос:
а можно ли вообще избавиться от флагов, пропсов и хуков в React-компонентах, которые отвечают за адаптивность?

Зачем каждый раз писать isMobile, size, compact, dense, fullWidth, вызывать хук для определения ширины экрана, если можно описать поведение компонента сразу через CSS и дать ему возможность адаптироваться к размеру своего контейнера?

Это размышление постараюсь разбить в небольшую серию постов, где я исследую, как убрать всю эту логику из JS и сделать компоненты по-настоящему контекстными и адаптивными.

Вот с чего обычно всё начинается:

function ProductCard({ product, isMobile }) {
  return (
    <Card size={isMobile ? 'compact' : 'full'}>
      <Image src={product.image} size={isMobile ? 'small' : 'large'} />
      <Title fontSize={isMobile ? '16px' : '24px'}>{product.name}</Title>
      {!isMobile && <Description>{product.description}</Description>}
      <Price>{product.price}</Price>
      <Button size={isMobile ? 'xs' : 'md'}>Купить</Button>
    </Card>
  );
}

К чему хочется прийти (css modules не обязательно, будем пробовать tailwind-variants, headless решения, какой-нибудь react-aria-components)

function ProductCard({ product }) {
  return (
    <div className="product-card-container">
      <Card className="product-card">
        <Image src={product.image} />
        <div className="product-info">
          <Title className="product-title">{product.name}</Title>
          <Description className="product-description">{product.description}</Description>
          <Price className="product-price">{product.price}</Price>
          <Button className="buy-button">Купить</Button>
        </div>
      </Card>
    </div>
  );
}

👍11❤1

www.group-telegram.com/sg/parrotontheweb.com/496

1.77K viewsedited  Jun 3 at 12:37

После того как я погрузился в возможности container queries, container units, а также fluid-типографику с clamp() и minmax(), возник вопрос:
а можно ли вообще избавиться от флагов, пропсов и хуков в React-компонентах, которые отвечают за адаптивность?

Зачем каждый раз писать isMobile, size, compact, dense, fullWidth, вызывать хук для определения ширины экрана, если можно описать поведение компонента сразу через CSS и дать ему возможность адаптироваться к размеру своего контейнера?

Это размышление постараюсь разбить в небольшую серию постов, где я исследую, как убрать всю эту логику из JS и сделать компоненты по-настоящему контекстными и адаптивными.

Вот с чего обычно всё начинается:

function ProductCard({ product, isMobile }) {
  return (
    <Card size={isMobile ? 'compact' : 'full'}>
      <Image src={product.image} size={isMobile ? 'small' : 'large'} />
      <Title fontSize={isMobile ? '16px' : '24px'}>{product.name}</Title>
      {!isMobile && <Description>{product.description}</Description>}
      <Price>{product.price}</Price>
      <Button size={isMobile ? 'xs' : 'md'}>Купить</Button>
    </Card>
  );
}

function ProductCard({ product }) {
  return (
    <div className="product-card-container">
      <Card className="product-card">
        <Image src={product.image} />
        <div className="product-info">
          <Title className="product-title">{product.name}</Title>
          <Description className="product-description">{product.description}</Description>
          <Price className="product-price">{product.price}</Price>
          <Button className="buy-button">Купить</Button>
        </div>
      </Card>
    </div>
  );
}

BY 🦜 on the web