Интеграция с Create React App

Для интеграции Chakra UI с проектом, созданным через Create React App (CRA), первым шагом является установка необходимых пакетов через npm или yarn. Основные зависимости включают саму библиотеку Chakra UI и её систему иконок:

npm install @chakra-ui/react @emotion/react @emotion/styled framer-motion
npm install @chakra-ui/icons
  • @chakra-ui/react — ядро библиотеки, предоставляет компоненты и хук useStyleConfig.
  • @emotion/react и @emotion/styled — необходимы для стилизации компонентов.
  • framer-motion — библиотека для анимаций, используется Chakra UI для плавных переходов.
  • @chakra-ui/icons — набор предустановленных иконок для быстрого использования.

После установки рекомендуется проверить корректность версий библиотек, чтобы исключить конфликты с React, особенно если проект создан недавно с CRA 5+.

Настройка ChakraProvider

Для того чтобы компоненты Chakra UI корректно работали в приложении, необходимо обернуть корневой компонент <App /> в <ChakraProvider>. Обычно это делается в файле index.js:

import React from 'react';
import ReactDOM from 'react-dom/client';
import { ChakraProvider } from '@chakra-ui/react';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <ChakraProvider>
    <App />
  </ChakraProvider>
);
  • <ChakraProvider> предоставляет глобальную тему, управление цветовой схемой и доступ к системным хукам.
  • Можно передавать собственную тему через проп theme для кастомизации стилей и цветов.

Создание кастомной темы

Chakra UI позволяет расширять или полностью переопределять стандартную тему. В CRA это делается через импорт extendTheme:

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

const customTheme = extendTheme({
  colors: {
    brand: {
      50: '#f5f7ff',
      100: '#e0e7ff',
      500: '#3b82f6',
      900: '#1e40af',
    },
  },
  fonts: {
    heading: 'Inter, sans-serif',
    body: 'Roboto, sans-serif',
  },
  components: {
    Button: {
      baseStyle: {
        fontWeight: 'bold',
      },
      sizes: {
        xl: {
          h: 12,
          fontSize: 'lg',
          px: 6,
        },
      },
      variants: {
        solid: (props) => ({
          bg: props.colorMode === 'dark' ? 'brand.500' : 'brand.100',
        }),
      },
    },
  },
});

export default customTheme;

После создания кастомной темы её необходимо передать в ChakraProvider:

import customTheme from './theme';

<ChakraProvider theme={customTheme}>
  <App />
</ChakraProvider>

Это обеспечивает глобальное применение всех настроек, включая цвета, шрифты и стили компонентов.

Цветовые режимы и Dark Mode

Chakra UI поддерживает переключение между светлой и тёмной темами с помощью ColorModeProvider и хука useColorMode. В CRA это можно настроить прямо через ChakraProvider:

import { ChakraProvider, extendTheme, ColorModeScript } from '@chakra-ui/react';
import customTheme from './theme';

const theme = extendTheme({ ...customTheme, config: { initialColorMode: 'light', useSystemColorMode: true } });

root.render(
  <>
    <ColorModeScript initialColorMode={theme.config.initialColorMode} />
    <ChakraProvider theme={theme}>
      <App />
    </ChakraProvider>
  </>
);
  • initialColorMode — задаёт стартовый режим приложения.
  • useSystemColorMode — позволяет автоматически подстраиваться под системные настройки пользователя.
  • ColorModeScript нужен для предотвращения мигания интерфейса при первичной загрузке страницы.

Для переключения режима в компонентах используется хук:

import { useColorMode, Button } from '@chakra-ui/react';

function ToggleMode() {
  const { colorMode, toggleColorMode } = useColorMode();
  return <Button onCl ick={toggleColorMode}>{colorMode === 'light' ? 'Тёмный режим' : 'Светлый режим'}</Button>;
}

Использование компонентов Chakra UI в CRA

Chakra UI предоставляет широкий набор готовых компонентов: Box, Flex, Grid, Button, Input, FormControl и многие другие. Основная особенность — стилизация через пропсы, что устраняет необходимость писать CSS:

import { Box, Flex, Button, Heading } from '@chakra-ui/react';

function LayoutExample() {
  return (
    <Flex direction="column" align="center" justify="center" minH="100vh" bg="gray.50">
      <Box p={6} rounded="md" shadow="md" bg="white">
        <Heading mb={4}>Добро пожаловать в Chakra UI</Heading>
        <Button colorScheme="blue" size="lg">Нажми меня</Button>
      </Box>
    </Flex>
  );
}
  • Flex и Box — базовые контейнеры для построения layout.
  • Стили задаются через пропсы (p, bg, rounded, shadow), что позволяет быстро прототипировать интерфейс.
  • Можно использовать псевдоклассы и медиазапросы через пропсы: _hover, _focus, responsive массивы ([sm, md, lg]).

Интеграция с формами и валидацией

Chakra UI совместим с библиотеками для работы с формами, такими как react-hook-form и formik. Пример с react-hook-form:

import { useForm } from 'react-hook-form';
import { FormControl, FormLabel, Input, Button, FormErrorMessage } from '@chakra-ui/react';

function SignupForm() {
  const { handleSubmit, register, formState: { errors } } = useForm();

  const onSub mit = (values) => console.log(values);

  return (
    <form onSub mit={handleSubmit(onSubmit)}>
      <FormControl isInvalid={errors.username}>
        <FormLabel>Имя пользователя</FormLabel>
        <Input {...register('username', { required: 'Обязательное поле' })} />
        <FormErrorMessage>{errors.username && errors.username.message}</FormErrorMessage>
      </FormControl>
      <Button mt={4} colorScheme="teal" type="submit">Регистрация</Button>
    </form>
  );
}
  • FormControl автоматически управляет состоянием ошибок.
  • FormErrorMessage отображает сообщения об ошибках.
  • Простая интеграция с react-hook-form позволяет минимизировать количество кода для управления формами.

Работа с иконками

Chakra UI имеет встроенный пакет иконок @chakra-ui/icons, который можно использовать без дополнительных зависимостей:

import { EmailIcon, CheckIcon } from '@chakra-ui/icons';
import { Button } from '@chakra-ui/react';

function IconButtons() {
  return (
    <>
      <Button leftIcon={<EmailIcon />} colorScheme="blue">Email</Button>
      <Button rightIcon={<CheckIcon />} colorScheme="green">Подтвердить</Button>
    </>
  );
}
  • leftIcon и rightIcon — специальные пропсы для добавления иконок в кнопку.
  • Иконки автоматически наследуют цвет от colorScheme.

Подключение шрифтов и глобальных стилей

Для CRA можно подключать шрифты через index.css или использовать тему Chakra UI:

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

const theme = extendTheme({
  fonts: {
    heading: `'Montserrat', sans-serif`,
    body: `'Open Sans', sans-serif`,
  },
});

export default theme;
  • Все компоненты автоматически используют заданные шрифты.
  • Можно комбинировать с Google Fonts через <link> в public/index.html.

Настройка анимаций

Chakra UI интегрируется с framer-motion, что позволяет создавать анимации появления, скрытия и переходов между состояниями:

import { Box } from '@chakra-ui/react';
import { motion } from 'framer-motion';

const MotionBox = motion(Box);

function AnimatedBox() {
  return (
    <MotionBox
      p={6}
      bg="blue.400"
      rounded="md"
      initial={{ opacity: 0, y: -20 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.5 }}
    >
      Анимированный блок
    </MotionBox>
  );
}
  • motion(Box) превращает любой компонент Chakra UI в анимируемый.
  • Можно задавать initial, animate и exit состояния для сложных эффектов.

Организация проекта

При работе с CRA и Chakra UI рекомендуется использовать структуру:

src/
 ├─ components/      // переиспользуемые UI-компоненты
 ├─ pages/           // страницы приложения
 ├─ theme/           // кастомная тема и расширения Chakra UI
 └─ App.js           // главный компонент приложения
  • Это облегчает поддержку и расширение проекта.
  • Компоненты могут использовать тему через useTheme и стили через пропсы.

Этот подход обеспечивает полную интеграцию Chakra UI в проект Create React App, позволяя создавать быстрые, адаптивные и легко настраиваемые интерфейсы.

Оглавление