Переиспользование и DRY

Chakra UI — это модульная библиотека компонентов для React, которая делает разработку интерфейсов более быстрой и предсказуемой. Одной из ключевых практик в Chakra UI является переиспользование компонентов и соблюдение принципа DRY (Don’t Repeat Yourself). Это позволяет создавать поддерживаемый, чистый и расширяемый код.

Создание повторно используемых компонентов

В Chakra UI любой UI-элемент можно превратить в самостоятельный компонент с настраиваемыми пропсами. Это позволяет избежать дублирования стилей и логики.

Пример: повторно используемая кнопка с разными цветами и размерами.

import { Button } from "@chakra-ui/react";

const CustomButton = ({ colorScheme = "blue", size = "md", children, ...props }) => {
  return (
    <Button colorScheme={colorScheme} size={size} {...props}>
      {children}
    </Button>
  );
};

// Использование
<CustomButton colorScheme="red" size="lg">Удалить</CustomButton>
<CustomButton colorScheme="green">Сохранить</CustomButton>

Здесь CustomButton является абстракцией над стандартной кнопкой Chakra, позволяя менять только нужные свойства при повторном использовании.

Компоненты с пользовательской стилизацией через extendTheme

Chakra UI предоставляет возможность создавать систему глобальных стилей и тем, что также поддерживает принцип DRY. Вместо того чтобы вручную указывать стили для каждого компонента, можно настроить тему.

import { extendTheme, ChakraProvider } from "@chakra-ui/react";

const theme = extendTheme({
  colors: {
    brand: {
      100: "#f7fafc",
      500: "#3182ce",
      900: "#1a365d",
    },
  },
  components: {
    Button: {
      baseStyle: {
        fontWeight: "bold",
      },
      sizes: {
        xl: {
          h: "56px",
          fontSize: "lg",
          px: "32px",
        },
      },
      variants: {
        solid: {
          bg: "brand.500",
          color: "white",
          _hover: {
            bg: "brand.700",
          },
        },
      },
    },
  },
});

function App() {
  return (
    <ChakraProvider theme={theme}>
      <Button size="xl" variant="solid">Применение темы</Button>
    </ChakraProvider>
  );
}

Преимущества:

  • Один источник правды для всех компонентов.
  • Легкость в поддержке дизайна.
  • Снижение дублирования кода.

Хук useStyleConfig для переиспользования стилей

Для создания компонентов с динамическими стилями удобно использовать useStyleConfig. Он позволяет получить стили из темы и применять их в любом месте.

import { Box, useStyleConfig } from "@chakra-ui/react";

const Card = ({ variant, children, ...props }) => {
  const styles = useStyleConfig("Card", { variant });
  return <Box __css={styles} {...props}>{children}</Box>;
};

В теме можно определить несколько вариантов:

components: {
  Card: {
    baseStyle: {
      p: 4,
      borderRadius: "md",
      boxShadow: "md",
    },
    variants: {
      outline: {
        border: "1px solid",
        borderColor: "gray.200",
      },
      solid: {
        bg: "gray.100",
      },
    },
  },
}

Использование:

<Card variant="outline">Контент с обводкой</Card>
<Card variant="solid">Контент с фоном</Card>

Такой подход обеспечивает полное переиспользование и единообразие интерфейса.

Абстракция повторяющихся комбинаций компонентов

В Chakra UI часто встречаются комбинации компонентов, которые повторяются на страницах. Их можно обернуть в отдельный компонент с настраиваемыми пропсами.

Пример: карточка пользователя с аватаром и кнопкой действия.

import { Box, Avatar, Text, Button, HStack } from "@chakra-ui/react";

const UserCard = ({ name, role, avatarUrl, onAction }) => (
  <Box p={4} borderWidth="1px" borderRadius="md" shadow="sm">
    <HStack spacing={4}>
      <Avatar src={avatarUrl} name={name} />
      <Box>
        <Text fontWeight="bold">{name}</Text>
        <Text fontSize="sm">{role}</Text>
      </Box>
      <Button ml="auto" onCl ick={onAction}>Действие</Button>
    </HStack>
  </Box>
);

Использование:

<UserCard 
  name="Иван Иванов" 
  role="Разработчик" 
  avatarUrl="https://example.com/avatar.jpg" 
  onAct ion={() => console.log("Нажато")} 
/>

Любая логика и стили внутри UserCard могут быть изменены централизованно, а использование на всех страницах остается одинаковым.

Переиспользуемые хелперы и системные утилиты

Chakra UI поставляется с множеством утилит, которые помогают не дублировать CSS-свойства:

  • stack (VStack, HStack, Stack) для управления отступами.
  • Box с sx или __css для применения системных стилей.
  • useToken для доступа к цветам, размерам и шрифтам из темы.

Пример переиспользуемого отступа:

import { VStack, Box } from "@chakra-ui/react";

const Section = ({ children }) => (
  <VStack spacing={6} align="stretch" my={8}>
    {children}
  </VStack>
);

<Section>
  <Box bg="blue.100" p={4}>Первый блок</Box>
  <Box bg="green.100" p={4}>Второй блок</Box>
</Section>

Section гарантирует одинаковый вертикальный отступ между элементами без повторного указания spacing или my.

Итоговые принципы DRY в Chakra UI

  1. Компоненты как абстракции — любая повторяющаяся структура должна быть вынесена в отдельный компонент.
  2. Темы и варианты — использовать extendTheme, useStyleConfig и variants вместо повторного написания стилей.
  3. Хелперы и системные компоненты — Stack, Box, Flex позволяют минимизировать дублирование CSS.
  4. Централизованная логика и пропсы — все параметры компонента должны быть настраиваемыми, чтобы повторно использовать один и тот же компонент в разных сценариях.

Соблюдение этих подходов делает проект на Chakra UI масштабируемым, удобным в поддержке и легко расширяемым.

Оглавление