patternfly-react
This project will provide a set of React UI components for the PatternFly project.
Getting Started
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
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:
npm i
npm start
How to deploy storybook to github pages in your fork:
npm run storybook:build
npm run storybook:deploy
To deploy Storybook to a remote other than origin, pass a --remote flag to npm run storybook:deploy.
For example, to deploy to your upstream remote:
npm run storybook:deploy -- --remote=upstream
To deploy Storybook to a target branch and serve with rawgit instead of gh-pages, pass --branch flag to npm run 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:
npm run storybook:deploy -- --branch=feature-branch-storybook
Meeting Notes
You can find all Patternfly React Community Meeting notes here.