A set of React components for the PatternFly project.
JavaScript CSS Other
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
.github docs(readme): add storybook-deploy notes as well as new pr template u… Dec 8, 2017
.travis feat(monorepo): converts patternfly-react to a lerna monorepo (#332) May 9, 2018
.vscode chore(vscode): remove eslint rule path options override (#346) May 14, 2018
packages chore(release): releasing component Aug 21, 2018
scripts feat(react-docs): Colocate Docs and Examples with Components (#537) Aug 16, 2018
storybook fix(prettier): change printWidth to 120 and expose rule in eslint-plu… Aug 13, 2018
.babelrc feat(monorepo): converts patternfly-react to a lerna monorepo (#332) May 9, 2018
.babelrc.js feat(react-docs): Colocate Docs and Examples with Components (#537) Aug 16, 2018
.eslintignore feat(react-icons): Added Initial Icons Package (#453) Jul 6, 2018
.eslintrc.js feat(react-docs): Colocate Docs and Examples with Components (#537) Aug 16, 2018
.gitignore feat(react-docs): Colocate Docs and Examples with Components (#537) Aug 16, 2018
.nvmrc chore(node): Add preinstall check for node version Dec 18, 2017
.prettierignore fix(prettier): change printWidth to 120 and expose rule in eslint-plu… Aug 13, 2018
.prettierrc fix(prettier): change printWidth to 120 and expose rule in eslint-plu… Aug 13, 2018
.stylelintrc add eslint-config-airbnb and stylelint (#216) Feb 19, 2018
.travis.yml fix(build): remove build in prepare and remove githooks yarn install (#… Jun 21, 2018
CONTRIBUTING.md feat(react-docs): Colocate Docs and Examples with Components (#537) Aug 16, 2018
LICENSE Initial Infrastructure Mar 16, 2017
README.md feat(react-icons): Added Initial Icons Package (#453) Jul 6, 2018
deploy_key.enc ci(releasing): Add travis config and semantic-release May 15, 2017
lerna.json feat(pf-next): added a framework to write Patternfly next components (#… Jun 18, 2018
now.json feat(react-docs): Colocate Docs and Examples with Components (#537) Aug 16, 2018
package.json feat(react-docs): Colocate Docs and Examples with Components (#537) Aug 16, 2018
plopfile.js chore(generator): patternfly 3 component generator (#450) Jul 5, 2018
release.sh refactor(package): Migrate from npm to Yarn (#289) Apr 12, 2018
test.env.js fix(react-styles-testing): fix file jest file caching. Add Aphrodite … Jul 17, 2018
tsconfig.json fix(react-core/typings): relax typings for button. Correct typings fo… Jun 25, 2018
yarn.lock feat(react-docs): Colocate Docs and Examples with Components (#537) Aug 16, 2018

README.md

patternfly-react

semantic-release lerna Build Status npm version Coverage Status

This project will provide a set of React UI components for the PatternFly project.

Getting Started

First, add patternfly-react dependency to your project. If you use Yarn:

yarn add patternfly-react

Alternatively, if you use npm:

npm install --save patternfly-react

Then import PatternFly React UI modules as ES6 modules:

import { Alert } from 'patternfly-react'

Using patterfly-react Sass files

As an alernative to consuming the patternfly-react.css file (found in dist/css), you can build patternfly-react styles into your css by including the Sass partials from dist/sass. The partial _patternfly-react.scss will pull in all the partials required for the patternfly-react components. When using the patternfly-react Sass files, you MUST include bootstrap and patternfly variables and mixins. An example of the required imports can be found in patternfly-react.scss.

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.

Storybook UI Development

This project uses React Storybook to test and demo new React UI components. You can view our current storybook here.

How to use Storybook locally:

yarn install
yarn start

How to deploy storybook to github pages in your fork:

yarn storybook:build
yarn storybook:deploy

To deploy Storybook to a remote other than origin, pass a --remote flag to yarn storybook:deploy. For example, to deploy to your upstream remote:

yarn storybook:deploy --remote=upstream

To deploy Storybook to a target branch and serve with rawgit instead of gh-pages, pass --branch flag to yarn storybook:deploy. This will create a new branch to serve your Storybook (and will be useful if you have multiple open pull requests).

For example, say you have feature-branch, you can deploy the storybook to a rawgit branch with:

yarn storybook:deploy --branch=feature-branch-storybook

Meeting Notes

You can find all PatternFly React Community Meeting notes here.