12.51.0 • Published 5d ago

@procore/core-react

Licence

SEE LICENSE IN LICENSE

Version

12.51.0

Deps

Size

11.9 MB

Vulns

Weekly

Summary Dependency Versions

CORE React

A set of React components implementing the design system spec.

Usage

Install

Install @procore/core-react from NPM.

yarn add @procore/core-react

Install the peer dependencies.

yarn add styled-components @procore/globalization-toolkit react-beautiful-dnd react react-dom

Install the optional peer dependencies if necessary.

yarn add formik

Styles

Core React's styled components handle all style inclusion except for two cases:

Border box and all elements

*,
::after,
::before {
  box-sizing: border-box;
}

Font Family

font-family: Inter, 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans SC',
  'Noto Sans TC', Arial, sans-serif;

Imports

Named imports support tree shaking and types.

import { Button, ButtonProps } from '@procore/core-react'
import { Cog } from '@procore/core-icons'

export function ButtonCustom(props: ButtonProps) {
  return <Button {...props} icon={<Cog />} />
}

If your app renders interactive content inside an open shadow root (for example, micro-frontend content in a custom element), enable React Aria shadow-DOM focus traversal for core-react at app bootstrap.

This ensures focus containment and tab order can move through shadow-root content for components that use React Aria focus management, like Tearsheet, Modal, and overlays.

import { enableShadowDOM } from '@procore/core-react'

enableShadowDOM()

Call this once before mounting your app. The call is idempotent, and each application using its own core-react instance should invoke it during bootstrap.