This project will provide a set of React UI components for the PatternFly project.
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'
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.
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 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
You can find all Patternfly React Community Meeting notes here.