Socket
Book a DemoInstallSign in
Socket

@procore/core-react

Package Overview
Dependencies
Maintainers
300
Versions
5560
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@procore/core-react

React library of Procore Design Guidelines

12.26.2
latest
Source
npmnpm
Version published
Weekly downloads
57K
145.01%
Maintainers
300
Weekly downloads
 
Created
Source

CORE React npm npm

A set of React components implementing the design system spec.

Requirements

Node 16+ YARN 4+

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 />} />
}

Developing

To get started, type the following from the project root directory:

yarn

All commands below will be ran in the package directory:

cd packages/core-react

We use Storybook to develop. Stories are broken into two categories, Demos for interactions and Coverage for displaying variants.

yarn storybook

Additional testing includes Visual Regression Testing (VRT) that is ran in CI, which compares pixel snapshots of Storybook Coverage stories.

Building

yarn build

Testing

Testing currently consists of Jest snapshots and React Testing Library tests.

yarn test

Jest Configuration

To ensure your Jest tests work seamlessly with @procore/core-react, we provide a configuration wrapper that you can easily use in your Jest setup.

Using Jest config file

jest.config.js

const { coreReactJestConfig } = require('@procore/core-react/jestConfig');

module.exports = coreReactJestConfig({
  // Your existing Jest config
});

Using Hammer

hammer.config.js

import { coreReactJestConfig } from '@procore/core-react/jestConfig';

export default {
  testJest: (defaultConfig) => coreReactJestConfig({
    ...defaultConfig,
    // Your existing Jest config
  })
};

Using Core Scripts

procore.config.js

const { coreReactJestConfig } = require('@procore/core-react/jestConfig');

module.exports = () => ({
  jestOverride: (defaultConfig) => coreReactJestConfig({
    ...defaultConfig,
    // Your existing Jest config
  }),
});

Contributing and Styleguide

Bug reports and pull requests are welcome on GitHub at https://github.com/procore/core. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the Contributor Covenant code of conduct.

In lieu of a formal styleguide, we use husky to create a precommit hook, which executes lint-staged to automatically format any git staged files using prettier.

License

The package is available under the Procore Developers License

About Procore

Procore Logo

Procore - building the software that builds the world.

Learn more about the #1 most widely used construction management software at procore.com

Keywords

javascript

FAQs

Package last updated on 03 Sep 2025

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

About

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc

U.S. Patent No. 12,346,443 & 12,314,394. Other pending.