Patternfly Web Components

Overview

React Component extensions (shims) for Patternfly web components are implemented to enhance the React.js experience and ease consumption in the React.js framework.

React Components require the core component dependencies mentioned in Components along with the following extension library:

npm install --save react-patternfly-shims

Alerts

Danger Will Robinson! Danger!

import React from 'react';
import { Alert } from 'react-patternfly-shims';

class Example extends React.Component {
	constructor(props) {
        super(props);
		this.state = { username: 'Will Robinson' };
	}
	render() {
		return (
            <Alert type="danger" persistent={true}> 
                Danger <strong> {this.state.username}</strong>! Danger!
            </Alert>
		)
	}
}

export default Example;

Charts

Utilization Bar Chart

The Utilization Bar Chart depicts the percentage utilization ratio between used and available.

Thresholds

import React from 'react';
import { UtilizationBarChart } from 'react-patternfly-shims';

class Example extends React.Component {
    constructor(props) {
        super(props);
        this.state = { used: 10 };
    }
	componentDidMount() {
        setInterval(() => {
            if (this.state.used > 100) {
                this.setState({used: 10});
            } else {
                this.setState({used: this.state.used + 10});
            }
        }, 1900);
	}
    onThresholdSet(event) {
        //monitor threshold here!
        let threshold = event.detail.threshold;
    }
    render() {
        return (
            <UtilizationBarChart 
                layout="default"
                chartTitle="RAM Usage" 
                used={this.state.used}
                total="100"
                units="MB"
                thresholdWarning="60"
                thresholdError="85"
                onThresholdSet={ this.onThresholdSet.bind(this)}
                />
        )
    }
}

export default Example;

Tabs

Cupcake ipsum dolor. Sit amet topping. Jelly-o cake ice cream jujubes marshmallow cotton candy.

Candy caramels sweet roll macaroon pastry cupcake liquorice. Cookie I love topping I love cookie toffee chocolate bar. Jelly-o sweet roll I love dessert powder.

import React from 'react';
import { Tab, Tabs } from 'react-patternfly-shims';

class Example extends React.Component {
    constructor(props) {
        super(props);
    }
    onTabChanged(event) {
        alert('holy guacamole! Active tab is now: ' + event.detail);
    }
    render() {
        return (
            <Tabs tabChanged={ this.onTabChanged.bind(this)}>
                <Tab tabTitle="Cupcakes" active={true}>
                    <p>Cupcake ipsum dolor. Sit amet topping. Jelly-o cake ice 
                    cream jujubes marshmallow cotton candy.</p>
                </Tab>
                <Tab tabTitle="Caramels">
                    <p>Candy caramels sweet roll macaroon pastry cupcake liquorice. 
                    Cookie I love topping I love cookie toffee chocolate bar. 
                    Jelly-o sweet roll I love dessert powder.</p>
                </Tab>
            </Tabs>
        )
    }
}

export default Example;

Tooltips

import React from 'react';
import { Tooltip } from 'react-patternfly-shims';

class Example extends React.Component {
    constructor(props) {
        super(props);
    }
    render() {
        return (
	    <div>
            <Tooltip animation="fade" targetSelector="#btn-left" placement="left" delay={50} duration={150} containerSelector="body">
                <span>Port side</span>
            </Tooltip>
            <button id="btn-left" type="button" class="btn btn-primary btn-lg">Left</button>

            <Tooltip animation="fade" targetSelector="#btn-top" placement="top" delay={50} duration={150} containerSelector="body">
                <span>Bow side</span>
            </Tooltip>
            <button id="btn-top" type="button" class="btn btn-primary btn-lg">Top</button>

            <Tooltip animation="fade" targetSelector="#btn-right" placement="right" delay={50} duration={150} containerSelector="body">
                <span>Starboard side</span>
            </Tooltip>
            <button id="btn-right" type="button" class="btn btn-primary btn-lg">Right</button>

            <Tooltip animation="fade" targetSelector="#btn-bottom" placement="bottom" delay={50} duration={150} containerSelector="body">
                <span>Stern side</span>
            </Tooltip>
            <button id="btn-bottom" type="button" class="btn btn-primary btn-lg">Bottom</button>
	    </div>
        )
    }
}

export default Example;

Demo Apps

The following app demonstrates use of React with Patternfly web components.

Components List

Github Project

Link to Project

React Components