4 лучшие библиотеки компонентов без стилей для создания настраиваемых приложений React

Вы можете использовать библиотеки компонентов, которые предоставляют готовые стилизованные элементы, чтобы упростить процесс разработки приложений React. Эти библиотеки могут сэкономить много времени и усилий, но они также могут ограничить ваш контроль над стилем вашего приложения. Если вам нужен больший контроль над стилем ваших приложений React, рассмотрите возможность использования библиотеки компонентов без стилей.

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

Нестилизованный компонент библиотеки используются для разработки доступных приложений React.. Это коллекции повторно используемых компонентов пользовательского интерфейса без предопределенных стилей. Они предоставляют вам базовую структуру элементов пользовательского интерфейса без каких-либо стилей. Это дает вам полный контроль над тем, как выглядят и ведут себя ваши компоненты.

Преимущества библиотек компонентов без стилей

Вот некоторые преимущества использования библиотек компонентов без стилей:

• Полный контроль над стилем: Нестилизованные библиотеки компонентов дают вам полный контроль над тем, как выглядят ваши компоненты. Вы можете использовать любой CSS или фреймворк стилей, чтобы настроить компоненты в соответствии с вашими потребностями.
• Ускорить разработку: Библиотеки компонентов без стилей могут помочь вам ускорить разработку, предоставляя набор готовых компонентов, которые вы можете использовать в своем приложении.
• Простота обслуживания: Библиотеки компонентов без стилей легко поддерживать, поскольку они не связаны жестко с какой-либо конкретной структурой стилей. Это означает, что вы можете легко обновить стиль, не внося изменений в базовый код.

Radix UI — это библиотека компонентов без стилей, ориентированная на доступность. Он предоставляет набор компонентов пользовательского интерфейса, разработанных так, чтобы быть доступными для всех пользователей. Ты можешь создавайте красивые приложения React с использованием пользовательского интерфейса Radix.

При работе с Radix UI вы можете установить отдельные нужные вам компоненты вместо всей библиотеки. Это гарантирует, что ваше приложение будет легким.

Например, если вам нужен только компонент «аккордеон», вы можете установить его в свое приложение, выполнив следующую команду:

npm install @radix-ui/react-accordion

После установки компонента аккордеона вы можете создавать аккордеоны в своем приложении React.

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

import React from"react"
import * as Accordion from"@radix-ui/react-accordion"
exportdefaultfunctionApp() {
return (


"single" defaultValue="item-1" collapsible>
"item-1">
Is this accordion unstyled?</Accordion.Trigger>
Yes. It is unstyled.</Accordion.Content>
 </Accordion.Item>
 </Accordion.Root>
 </div>
 )
}

Приведенный выше блок кода устанавливает базовый нестилизованный компонент аккордеона с помощью @radix-ui/реагировать-аккордеон библиотека, позволяющая создавать складные элементы с настраиваемым содержимым.

Код сгенерирует аккордеон, который выглядит следующим образом:

Библиотека React Aria — это набор хуков для создания пользовательских интерфейсов в React. Библиотека упрощает создание доступных веб-приложений, предоставляя набор компонентов, соответствующих лучшим практикам обеспечения доступности.

Adobe разработала и поддерживает библиотеку React Aria. Библиотека является частью более обширной системы дизайна Adobe Spectrum, которая предоставляет полный набор рекомендаций по проектированию и ресурсов для создания доступных пользовательских интерфейсов. Элементы, предоставляемые библиотекой React Aria, не имеют стилей, что позволяет вам настраивать их в соответствии с вашими потребностями.

Чтобы использовать React Aria в своем приложении React, установите его, выполнив следующую команду:

npm install react-aria

Вот пример того, как создать компонент кнопки с помощью использовать кнопку крюк:

import React from'react'
import {useButton} from'react-aria';
functionButton(props: any) {
let ref = React.useRef(null);
let { buttonProps } = useButton(props, ref);
return (

 {props.children}
 </button>
 );
}
exportdefault Button;

Теперь вы можете импортировать и визуализировать кнопка компонент в любой другой компонент по вашему выбору.

Например:

import React from'react'
import Button from'./Button';
functionApp() {
return (
Click Me</Button>
 );
}
exportdefault App;

Когда вы визуализируете приведенный выше блок кода, он создаст простую кнопку, которая выглядит следующим образом:

Если вам неудобно использовать React Aria из-за хуков, используйте Компоненты React Aria вместо этого библиотека. Эта библиотека предоставляет готовые компоненты, доступные по умолчанию. Это тонкий слой поверх библиотеки React Aria. Предоставленные компоненты не имеют стиля, поэтому две библиотеки очень похожи.

Base UI — это библиотека пользовательского интерфейса React без стилей, которая предоставляет компоненты пользовательского интерфейса без стилей. Команда Material UI создала базовый пользовательский интерфейс с набором основных компонентов, которые вы можете использовать для создания собственных приложений React. Они основали библиотеку Base UI на той же основе. надежная инженерия как Material UI, но базовый пользовательский интерфейс не реализует Material Design.

Вы можете установить Base UI в свое приложение React с помощью этой команды:

npm install @mui/base

Базовый пользовательский интерфейс предоставляет компоненты на ходу, то есть вы можете напрямую импортировать и использовать компоненты из библиотеки. Он также предоставляет хуки, которые вы можете использовать для создания и настройки ваших компонентов.

Вот пример использования компонентов Base UI:

import React from"react";
import Button from"@mui/base/Button";
exportdefaultfunctionApp() {
return (


Click Me</Button>
 </div>
 );
}

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

import React from"react";
import useButton from"@mui/base/useButton";
exportdefaultfunctionApp() {
const { getRootProps } = useButton();
return (


Click Me</button>
 </div>
 );
}

использовать кнопку крючок и Кнопка компонент сгенерирует кнопку без стиля, как показано на изображении ниже.

Еще одна библиотека, которую вы можете изучить, — это Headless UI, которая предлагает элементы пользовательского интерфейса без стилей, что дает вам свободу настраивать внешний вид и поведение компонентов пользовательского интерфейса по своему усмотрению.

Установить библиотеку можно с помощью следующей команды:

npm install @headlessui/react

После установки библиотеки вы можете использовать несколько компонентов, которые она предоставляет, в своем приложении React.

Например:

import React from"react";
import { Popover } from"@headlessui/react";
exportdefaultfunctionApp() {
return (




Popover</Popover.Button>

This is a Popover</p>
 </Popover.Panel>
 </Popover>
 </div>
 );
}

В этом примере вы создаете всплывающее окно, используя Трещать компонент из библиотеки Headless UI. Приведенный выше блок кода создаст всплывающее окно, которое выглядит следующим образом.

Получите полный контроль с помощью нестилизованных компонентов

Библиотеки компонентов без стилей дают вам полный контроль над стилем вашего приложения React, позволяя создавать уникальный пользовательский интерфейс. Эти библиотеки предлагают ряд опций в соответствии с вашими потребностями. Вы можете создавать визуально привлекательные и легко настраиваемые приложения React, используя упомянутые выше библиотеки.