UNPKG

2.76 kBMarkdownView Raw
1# PatternFly React - Core
2
3[![lerna](https://img.shields.io/badge/maintained%20with-lerna-green.svg?style=for-the-badge)](https://lernajs.io/)
4[![PatternFly 4 npm badge](https://img.shields.io/npm/v/@patternfly/react-core.svg?label=React-Core&style=for-the-badge)](https://www.npmjs.com/package/@patternfly/react-core)
5
6This project provides the React core components for the [PatternFly project](https://patternfly.org).
7
8**Community:** [PatternFly website](https://www.patternfly.org) | [Slack](https://slack.patternfly.org) | [Medium](https://medium.com/patternfly) | [Mailing list](https://www.redhat.com/mailman/listinfo/patternfly)
9
10### Table of contents
111. [Setup](#Setup)
122. [Contribution guidelines](#Contribution-guidelines)
133. [License](#License)
14
15### Setup
16
17Before you begin, check out this [overview of PatternFly](http://patternfly.org/v4/get-started/about) to get familiar with the basic elements of the design system. These instructions also assume that an existing React project is set up. For more information on how to do this, please see our main [README](https://github.com/patternfly/patternfly-react/tree/main/README.md#setup).
18
19#### Install the @patternfly/react-core NPM package
20* Using npm, run the following command to install:
21 ```
22 npm install @patternfly/react-core --save
23 ```
24
25 **OR**
26
27* Using yarn, run the following command to install:
28 ```
29 yarn add @patternfly/react-core
30 ```
31
32#### Project configuration
33Each PatternFly component already contains the CSS related to the component. In order to have consistent styles throughout the application, PatternFly Base CSS should be used in the project, or some components may diverge in appearance. This import statement should be placed before your main application component is imported.
34
35```js
36import '@patternfly/react-core/dist/styles/base.css';
37```
38
39#### Example component usage
40
41```js
42import { Button } from '@patternfly/react-core';
43
44export default <Button variant="primary">Button</Button>;
45```
46
47All component documentation is available on [PatternFly.org](https://www.patternfly.org/v4/components/about-modal).
48
49#### Advanced usage
501. [Applying Overpass font](https://github.com/patternfly/patternfly-react/blob/main/ADVANCED-USAGE-README.md#Applying-Overpass-font)
51
52### Contribution guidelines
53All React contributors must first be [PatternFly community contributors](https://www.patternfly.org/v4/contribute/about). If you are already a PatternFly community contributor, check out the [React contribution guidelines](https://github.com/patternfly/patternfly-react/tree/main/CONTRIBUTING.md) to make React contributions.
54
55### License
56PatternFly React is licensed under the [MIT License](https://github.com/patternfly/patternfly-react/tree/main/LICENSE).