Package Exports

@patternfly/react-core
@patternfly/react-core/dist/esm/components/Backdrop/Backdrop.js
@patternfly/react-core/dist/esm/components/Badge
@patternfly/react-core/dist/esm/components/Badge/Badge.js
@patternfly/react-core/dist/esm/components/Button
@patternfly/react-core/dist/esm/components/Button/Button.js
@patternfly/react-core/dist/esm/components/Card
@patternfly/react-core/dist/esm/components/Card/Card.js
@patternfly/react-core/dist/esm/components/Card/CardBody.js
@patternfly/react-core/dist/esm/components/Card/CardHeader.js
@patternfly/react-core/dist/esm/components/Checkbox/Checkbox.js
@patternfly/react-core/dist/esm/components/ClipboardCopy
@patternfly/react-core/dist/esm/components/Dropdown
@patternfly/react-core/dist/esm/components/EmptyState
@patternfly/react-core/dist/esm/components/Form/ActionGroup.js
@patternfly/react-core/dist/esm/components/Form/Form.js
@patternfly/react-core/dist/esm/components/Form/FormGroup.js
@patternfly/react-core/dist/esm/components/Form/FormHelperText.js
@patternfly/react-core/dist/esm/components/InputGroup/InputGroup.js
@patternfly/react-core/dist/esm/components/Modal
@patternfly/react-core/dist/esm/components/Pagination
@patternfly/react-core/dist/esm/components/Popover
@patternfly/react-core/dist/esm/components/Radio/Radio.js
@patternfly/react-core/dist/esm/components/Switch/Switch.js
@patternfly/react-core/dist/esm/components/Tabs
@patternfly/react-core/dist/esm/components/Tabs/Tab.js
@patternfly/react-core/dist/esm/components/Tabs/Tabs.js
@patternfly/react-core/dist/esm/components/Text/Text.js
@patternfly/react-core/dist/esm/components/Text/TextContent.js
@patternfly/react-core/dist/esm/components/TextArea/TextArea.js
@patternfly/react-core/dist/esm/components/TextInput/TextInput.js
@patternfly/react-core/dist/esm/components/Title
@patternfly/react-core/dist/esm/components/Title/Title.js
@patternfly/react-core/dist/esm/components/Tooltip
@patternfly/react-core/dist/esm/components/Wizard/WizardBody.js
@patternfly/react-core/dist/esm/components/Wizard/WizardHeader.js
@patternfly/react-core/dist/esm/components/Wizard/WizardNav.js
@patternfly/react-core/dist/esm/components/Wizard/WizardNavItem.js
@patternfly/react-core/dist/esm/experimental
@patternfly/react-core/dist/esm/layouts/Bullseye
@patternfly/react-core/dist/esm/layouts/Bullseye/Bullseye.js
@patternfly/react-core/dist/esm/layouts/Grid
@patternfly/react-core/dist/esm/layouts/Grid/Grid.js
@patternfly/react-core/dist/esm/layouts/Grid/GridItem.js
@patternfly/react-core/dist/esm/layouts/Level
@patternfly/react-core/dist/esm/layouts/Split
@patternfly/react-core/dist/esm/layouts/Stack
@patternfly/react-core/dist/js/components/Alert/Alert.js
@patternfly/react-core/dist/js/components/Alert/AlertActionCloseButton.js
@patternfly/react-core/dist/js/components/Backdrop/Backdrop
@patternfly/react-core/dist/js/components/Backdrop/Backdrop.js
@patternfly/react-core/dist/js/components/Badge/Badge
@patternfly/react-core/dist/js/components/Badge/Badge.js
@patternfly/react-core/dist/js/components/Breadcrumb/Breadcrumb.js
@patternfly/react-core/dist/js/components/Breadcrumb/BreadcrumbItem.js
@patternfly/react-core/dist/js/components/Button
@patternfly/react-core/dist/js/components/Button/Button
@patternfly/react-core/dist/js/components/Button/Button.js
@patternfly/react-core/dist/js/components/Card/Card
@patternfly/react-core/dist/js/components/Card/Card.js
@patternfly/react-core/dist/js/components/Card/CardActions
@patternfly/react-core/dist/js/components/Card/CardBody
@patternfly/react-core/dist/js/components/Card/CardBody.js
@patternfly/react-core/dist/js/components/Card/CardFooter
@patternfly/react-core/dist/js/components/Card/CardHead
@patternfly/react-core/dist/js/components/Card/CardHeader
@patternfly/react-core/dist/js/components/Card/CardHeader.js
@patternfly/react-core/dist/js/components/Checkbox/Checkbox
@patternfly/react-core/dist/js/components/Checkbox/Checkbox.js
@patternfly/react-core/dist/js/components/ChipGroup/Chip.js
@patternfly/react-core/dist/js/components/ChipGroup/ChipGroup.js
@patternfly/react-core/dist/js/components/ChipGroup/ChipGroupToolbarItem.js
@patternfly/react-core/dist/js/components/ClipboardCopy/ClipboardCopy
@patternfly/react-core/dist/js/components/ClipboardCopy/ClipboardCopy.js
@patternfly/react-core/dist/js/components/Dropdown
@patternfly/react-core/dist/js/components/Dropdown/Dropdown
@patternfly/react-core/dist/js/components/Dropdown/Dropdown.js
@patternfly/react-core/dist/js/components/Dropdown/DropdownItem
@patternfly/react-core/dist/js/components/Dropdown/DropdownItem.js
@patternfly/react-core/dist/js/components/Dropdown/DropdownToggle
@patternfly/react-core/dist/js/components/Dropdown/DropdownToggle.js
@patternfly/react-core/dist/js/components/Dropdown/DropdownToggleCheckbox.js
@patternfly/react-core/dist/js/components/Dropdown/KebabToggle
@patternfly/react-core/dist/js/components/Dropdown/KebabToggle.js
@patternfly/react-core/dist/js/components/Dropdown/dropdownConstants
@patternfly/react-core/dist/js/components/Dropdown/dropdownConstants.js
@patternfly/react-core/dist/js/components/EmptyState/EmptyState
@patternfly/react-core/dist/js/components/EmptyState/EmptyState.js
@patternfly/react-core/dist/js/components/EmptyState/EmptyStateBody
@patternfly/react-core/dist/js/components/EmptyState/EmptyStateBody.js
@patternfly/react-core/dist/js/components/EmptyState/EmptyStateIcon
@patternfly/react-core/dist/js/components/EmptyState/EmptyStateIcon.js
@patternfly/react-core/dist/js/components/EmptyState/EmptyStateSecondaryActions.js
@patternfly/react-core/dist/js/components/Form/ActionGroup
@patternfly/react-core/dist/js/components/Form/ActionGroup.js
@patternfly/react-core/dist/js/components/Form/Form
@patternfly/react-core/dist/js/components/Form/Form.js
@patternfly/react-core/dist/js/components/Form/FormGroup
@patternfly/react-core/dist/js/components/Form/FormGroup.js
@patternfly/react-core/dist/js/components/Form/FormHelperText
@patternfly/react-core/dist/js/components/Form/FormHelperText.js
@patternfly/react-core/dist/js/components/FormSelect/FormSelect.js
@patternfly/react-core/dist/js/components/FormSelect/FormSelectOption.js
@patternfly/react-core/dist/js/components/InputGroup/InputGroup
@patternfly/react-core/dist/js/components/InputGroup/InputGroup.js
@patternfly/react-core/dist/js/components/Label/Label.js
@patternfly/react-core/dist/js/components/Modal
@patternfly/react-core/dist/js/components/Modal/Modal.js
@patternfly/react-core/dist/js/components/Pagination
@patternfly/react-core/dist/js/components/Pagination/Pagination
@patternfly/react-core/dist/js/components/Pagination/Pagination.js
@patternfly/react-core/dist/js/components/Popover
@patternfly/react-core/dist/js/components/Popover/Popover.js
@patternfly/react-core/dist/js/components/Radio/Radio
@patternfly/react-core/dist/js/components/Radio/Radio.js
@patternfly/react-core/dist/js/components/Select/Select.js
@patternfly/react-core/dist/js/components/Select/SelectGroup.js
@patternfly/react-core/dist/js/components/Select/SelectOption.js
@patternfly/react-core/dist/js/components/Select/selectConstants.js
@patternfly/react-core/dist/js/components/Switch/Switch
@patternfly/react-core/dist/js/components/Switch/Switch.js
@patternfly/react-core/dist/js/components/Tabs/Tab
@patternfly/react-core/dist/js/components/Tabs/Tab.js
@patternfly/react-core/dist/js/components/Tabs/Tabs
@patternfly/react-core/dist/js/components/Tabs/Tabs.js
@patternfly/react-core/dist/js/components/Text/Text
@patternfly/react-core/dist/js/components/Text/Text.js
@patternfly/react-core/dist/js/components/Text/TextContent
@patternfly/react-core/dist/js/components/Text/TextContent.js
@patternfly/react-core/dist/js/components/Text/TextList.js
@patternfly/react-core/dist/js/components/Text/TextListItem.js
@patternfly/react-core/dist/js/components/TextArea/TextArea
@patternfly/react-core/dist/js/components/TextArea/TextArea.js
@patternfly/react-core/dist/js/components/TextInput
@patternfly/react-core/dist/js/components/TextInput/TextInput
@patternfly/react-core/dist/js/components/TextInput/TextInput.js
@patternfly/react-core/dist/js/components/Title/Title
@patternfly/react-core/dist/js/components/Title/Title.js
@patternfly/react-core/dist/js/components/Tooltip/Tooltip
@patternfly/react-core/dist/js/components/Tooltip/Tooltip.js
@patternfly/react-core/dist/js/components/Wizard/WizardBody
@patternfly/react-core/dist/js/components/Wizard/WizardBody.js
@patternfly/react-core/dist/js/components/Wizard/WizardHeader
@patternfly/react-core/dist/js/components/Wizard/WizardHeader.js
@patternfly/react-core/dist/js/components/Wizard/WizardNav
@patternfly/react-core/dist/js/components/Wizard/WizardNav.js
@patternfly/react-core/dist/js/components/Wizard/WizardNavItem
@patternfly/react-core/dist/js/components/Wizard/WizardNavItem.js
@patternfly/react-core/dist/js/components/withOuia/withOuia
@patternfly/react-core/dist/js/experimental
@patternfly/react-core/dist/js/helpers/ouia
@patternfly/react-core/dist/js/helpers/util
@patternfly/react-core/dist/js/layouts/Bullseye/Bullseye
@patternfly/react-core/dist/js/layouts/Bullseye/Bullseye.js
@patternfly/react-core/dist/js/layouts/Bullseye/index
@patternfly/react-core/dist/js/layouts/Grid/Grid.js
@patternfly/react-core/dist/js/layouts/Grid/GridItem
@patternfly/react-core/dist/js/layouts/Grid/GridItem.js
@patternfly/react-core/dist/js/layouts/Grid/index
@patternfly/react-core/dist/js/layouts/Level/Level.js
@patternfly/react-core/dist/js/layouts/Level/LevelItem.js
@patternfly/react-core/dist/js/layouts/Split/Split
@patternfly/react-core/dist/js/layouts/Split/Split.js
@patternfly/react-core/dist/js/layouts/Split/SplitItem
@patternfly/react-core/dist/js/layouts/Split/SplitItem.js
@patternfly/react-core/dist/js/layouts/Stack/Stack
@patternfly/react-core/dist/js/layouts/Stack/Stack.js
@patternfly/react-core/dist/js/layouts/Stack/StackItem
@patternfly/react-core/dist/js/layouts/Stack/StackItem.js
@patternfly/react-core/dist/js/layouts/Stack/index
@patternfly/react-core/dist/js/layouts/Toolbar/Toolbar.js
@patternfly/react-core/dist/js/layouts/Toolbar/ToolbarItem
@patternfly/react-core/dist/js/layouts/Toolbar/ToolbarItem.js
@patternfly/react-core/dist/styles/base.css

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@patternfly/react-core) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

@patternfly/react-core

This package provides Core PatternFly components for the PatternFly 4.

Prerequisite

Node Environment

This project currently supports Node Active LTS releases. Please stay current with Node Active LTS when developing patternfly-react.

For example, to develop with Node 8, use the following:

nvm install 8
nvm use 8

This project also requires a Yarn version of >=1.6.0. The latest version can be installed here.

Installing

yarn add @patternfly/react-core

npm install @patternfly/react-core --save

Usage

Pre-requisites

It's strongly advised to use the PatternFly Base CSS in your whole project, or some components may diverge in appearance:

import '@patternfly/react-core/dist/styles/base.css';

Example Component Usage

import { Button } from '@patternfly/react-core';

export default <Button variant="primary">Button</Button>;

All css related to each component is provided within it. There is no component level CSS to import.

Applying Red Hat Fonts (Optional)

If you would like to use Red Hat fonts instead of Overpass, simply add the class .pf-m-redhat-font to an element that wraps your application (ideally <html> or <body>) to adopt the CSS changes that introduce the Red Hat fonts into PatternFly.

Documentation

This project uses Gatsby. For an overview of the project structure please refer to the Gatsby documentation - Building with Components.

A comprehensive list of components and detailed usage of each can be found on the PatternFly React Docs website You can also find how each component is meant to be used from a design perspective on the PatternFly 4 Core website.

Note: All commands below assume you are on the root directory in this repository.

Install

Run to install all the dependencies

yarn install && yarn build

Running

To start the site locally.

yarn start:pf4

Building

To build the site.

yarn build:docs

Contributing Components

This library makes use of the babel plugin from @patternfly/react-styles to enable providing the CSS alongside the components. This removes the need for consumers to use (style|css|sass)-loaders. For an example of using CSS from core you can reference Button.js. For any CSS not provided by core please use the StyleSheet.create utility from @patternfly/react-styles. This will prevent collisions with any consumers, and allow the CSS to be bundled with the component.

Building

yarn build

Note the build scripts for this are located in the root package.json under yarn build.

Testing

Testing is done at the root of this repo. To only run the patternfly-react tests:

yarn test packages/patternfly-4/react-core