Генерация компонентов

Chakra UI — это компонентная библиотека для React, которая предоставляет готовые к использованию UI-компоненты с гибкой системой стилизации и поддержкой темы. Генерация компонентов в Chakra UI строится на концепции декларативного подхода, где каждый элемент создаётся как React-компонент с возможностью передачи props для настройки внешнего вида и поведения.

Использование базовых компонентов

Базовые компоненты Chakra UI включают Box, Flex, Text, Button, Input и другие. Эти компоненты служат фундаментом для построения интерфейса и обладают следующими особенностями:

  • Стилизуемость через props: вместо CSS используются props вроде p (padding), m (margin), bg (background), color и других.
  • Адаптивность: компоненты поддерживают объектную форму пропсов для медиа-запросов, например:
<Box
  bg={{ base: "red.200", md: "blue.200" }}
  p={{ base: 2, md: 4 }}
>
  Пример адаптивного Box
</Box>
  • Композиция: базовые компоненты можно объединять, создавая более сложные UI-структуры без необходимости писать отдельные CSS-классы.

Генерация компонентов через функцию chakra()

Функция chakra() позволяет создавать кастомные компоненты, наследующие все возможности Chakra UI, включая стилизуемые props и тему. Синтаксис выглядит так:

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

const CustomButton = chakra("button", {
  baseStyle: {
    fontWeight: "bold",
    borderRadius: "md",
  },
});

<CustomButton bg="green.400" color="white">
  Кастомная кнопка
</CustomButton>

Особенности использования chakra():

  • baseStyle задаёт базовые стили, которые применяются ко всем экземплярам компонента.
  • Поддерживается тема Chakra, поэтому можно использовать значения из theme.colors, theme.space, theme.fontSizes.
  • Можно генерировать компоненты не только из стандартных HTML-элементов, но и из существующих React-компонентов.

Компоненты с системными пропсами

Chakra UI включает систему пропсов для стилей, которая охватывает:

  • Layout: width, height, display, position.
  • Flexbox: flex, alignItems, justifyContent.
  • Typography: fontSize, fontWeight, lineHeight.
  • Color: color, bg, borderColor.
  • Space: margin, padding.

Использование системных пропсов позволяет генерировать UI без CSS-файлов, создавая компоненты динамически:

<Box
  display="flex"
  alignItems="center"
  justifyContent="space-between"
  p={4}
  bg="gray.100"
>
  <Text fontSize="lg" fontWeight="bold">Заголовок</Text>
  <Button colorScheme="blue">Действие</Button>
</Box>

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

Для генерации компонентов, которые будут использоваться многократно, применяются функциональные компоненты React с Chakra props:

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

function Card({ title, description, buttonText }) {
  return (
    <Box p={5} shadow="md" borderWidth="1px" borderRadius="lg">
      <Text fontSize="xl" fontWeight="semibold">{title}</Text>
      <Text mt={2}>{description}</Text>
      <Button mt={4} colorScheme="teal">{buttonText}</Button>
    </Box>
  );
}

Такой подход позволяет динамически создавать компоненты с разными данными, используя одну и ту же структуру.

Использование extendTheme для генерации компонентов с уникальной темой

Chakra UI позволяет создавать кастомные темы, которые определяют стили для всех компонентов. Например, можно расширить стандартную тему и добавить новые компоненты:

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

const theme = extendTheme({
  components: {
    CustomButton: {
      baseStyle: {
        fontWeight: "bold",
        textTransform: "uppercase",
      },
      sizes: {
        lg: { fontSize: "lg", px: 6, py: 4 },
      },
      variants: {
        solid: { bg: "purple.500", color: "white" },
        outline: { borderColor: "purple.500", color: "purple.500" },
      },
    },
  },
});

export default theme;

После этого компонент можно использовать так:

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

<Button size="lg" variant="solid">Применение темы</Button>

Динамическая генерация компонентов через массивы данных

Часто интерфейсы требуют повторяющихся элементов, например списков карточек или кнопок. Chakra UI позволяет комбинировать map-функции с системными пропсами, создавая множество компонентов динамически:

const items = [
  { title: "Первый", color: "red.300" },
  { title: "Второй", color: "blue.300" },
  { title: "Третий", color: "green.300" },
];

<Flex gap={4}>
  {items.map((item, index) => (
    <Box key={index} p={4} bg={item.color} borderRadius="md">
      {item.title}
    </Box>
  ))}
</Flex>

Такой подход позволяет генерировать сложные UI-структуры из данных, не повторяя JSX вручную.

Компоненты с контекстом и состоянием

Для генерации интерактивных компонентов Chakra UI поддерживает hooks и контекстные провайдеры, например useDisclosure для модальных окон:

import { Button, Modal, ModalOverlay, ModalContent, useDisclosure } from "@chakra-ui/react";

function ModalExample() {
  const { isOpen, onOpen, onClose } = useDisclosure();

  return (
    <>
      <Button onCl ick={onOpen}>Открыть модал</Button>
      <Modal isOpen={isOpen} onCl ose={onClose}>
        <ModalOverlay />
        <ModalContent p={4}>
          <Text>Содержимое модального окна</Text>
        </ModalContent>
      </Modal>
    </>
  );
}

Использование таких хуков позволяет генерировать компоненты с внутренней логикой, оставаясь в рамках декларативного подхода.

Итоговые рекомендации по генерации компонентов

  • Использовать chakra() для создания кастомных компонентов с базовыми стилями.
  • Применять системные пропсы для управления внешним видом без CSS.
  • Генерировать компоненты через map и массивы данных для повторяющихся элементов.
  • Расширять тему через extendTheme для единообразия дизайна.
  • Включать хуки и контексты для интерактивности и управления состоянием.

Эти подходы позволяют создавать масштабируемые, переиспользуемые и динамичные компоненты, полностью используя возможности Chakra UI и React.

Оглавление