react-spectrum README

The project's README from github.com/adobe/react-spectrum. As one markdown file: README.md.

React Spectrum Libraries

A collection of libraries and tools that help you build adaptive, accessible, and robust user experiences.

React Spectrum

A React implementation of Spectrum, Adobe’s design system. Spectrum provides adaptive, accessible, and cohesive experiences for all Adobe applications.

Explore React Spectrum

React Aria

A library of unstyled React components and hooks that helps you build accessible, high quality UI components for your application or design system.

Learn more about React Aria

React Stately

A library of React Hooks that provides cross-platform state management for your design system.

More information about React Stately

Internationalized

A collection of framework-agnostic internationalization libraries for the web.

Internationalized Packages

Features

Getting started

React Spectrum includes several libraries, which you can choose depending on your usecase.

Read more about our architecture.

Contributing

One of the goals of the React Spectrum project is to make building design systems and component libraries as easy as possible, while maintaining high quality interactions and accessibility support. We aim to raise the bar for web applications. The best way to achieve that goal is together. We would love contributions from the community no matter how big or small. 😍

Read our contributing guide to learn about how to propose bugfixes and improvements, and how the development process works. For detailed information about our architecture, and how all of the pieces fit together, read our architecture rfc.

react-spectrum (adobe/react-spectrum)

Searching Database…

16K ·GitHub
React-spectrum
这是什么?Adobe 开源的一套库和工具,用于在 React 中构建自适应、无障碍且健壮的用户体验。
这是一个组件库还是好几个?是多个独立库的集合:React Spectrum(把 Adobe 的设计系统做成现成的 React 组件)、React Aria(不带样式、无障碍的组件和 hooks)、以及 React Stately(状态管理 hooks)。
我怎么在我的应用里开始使用它?根据你的使用场景选一个库,然后从 npm 安装:想要一套完整的带样式组件库就用 React Spectrum;想自己写组件、自己定样式就用 React Aria。
除了 React 我还需要什么吗?只需要 React——这些库都是通过 npm 包来使用的。仓库里还有一个脚本,用于适配旧版 React 16.8 环境。
React Spectrum 会把我绑死在 Adobe 的视觉风格上吗?React Spectrum 自带 Adobe Spectrum 设计系统的外观,用它就意味着接受这套视觉风格。如果想完全掌控样式和 DOM 结构,可以改用不带样式的 React Aria hooks 来搭建。
这些组件是怎么做到无障碍的?交互行为遵循 WAI-ARIA Authoring Practices,完整支持屏幕阅读器和键盘导航,而且组件在多种屏幕阅读器和设备上都做过测试。
它开箱就支持国际化吗?支持——内置了 30 多种语言的支持,包括从右到左的语言,以及日期和数字格式化。另外还有独立的、不依赖特定框架的 i18n 库。
我能自定义主题或者用深色模式吗?React Spectrum 的组件支持自定义主题,并且会自动适配深色模式。想更深度地定制,可以用 React Aria 和 React Stately 的 hooks 来搭建自己的组件。
Adobe 为什么要做这个?官方目标是让搭建设计系统和组件库尽可能简单,同时保证高质量的交互和无障碍体验——从而提高 Web 应用的整体水准。
What are similar projects?base-ui, chakra-ui, arc-library, primitives, Libraries.dev, astryx, kumo, vant
Which topics is it in?wai-aria, internationalization, design-systems, react-components, hooks, responsive, ui-library, state-management, dark-mode, accessibility, component-library, i18n
Creator
adobe
Size
246.9 MB
Stars
16K
Updated
CommitOct 16Release[email protected]Oct 09
Age
7y
Commits · 90 Days