pivotal-ui-react

React components built on top of a Bootstrap-based styleguide

Usage

To include pivotal-ui-react components in your own project:

1. npm install pivotal-ui-react.<component-name>
2. Include the CSS manually from the pivotal-ui git repo. Yes, we know this is sub-optimal, we're working on it. ;) NB: You will need to be part of the Pivotal CF Github organization to download Pivotal UI. If you do not have access, email ask+cf@pivotal.io.
3. The components have a umd wrapper and can be loaded using any of the standard methods. We test them using CommonJS style (require('pivotal-ui-react.<component-name>')) loaded with Webpack.

Dependencies

PUI-react uses the CommonJS pattern of requiring modules to use components. To load the components for use in a browser, you will need a build tool like Webpack or Browserify. We also require ReactJS. The specific version is listed in our peer dependencies.

Development

This library is intimately tied to Pivotal UI and development should be done on the Pivotal UI styleguide.

To develop react components:

The first time you create a component in src/<component-name>

gulp build

This will create a distribution folder for you with a package.json and transpiled JavaScript.

While developing the component, run in the background

gulp foreman

This will keep your built JavaScript up-to-date and launch a Jasmine server on port 8888.

To use your component in Pivotal UI, in root of your pivotal-ui directory, type

npm link ../path/to/pivotal-ui-react/dist/component-name

For example, if pivotal-ui and pivotal-ui-react are both in the same parent directory, you can link in the tooltip component with

npm link ../pivotal-ui-react/dist/tooltip