Using react-bootstrap

In Sabre Red 360 the current version of react-bootstrap is 0.32.1 and @types/react-bootstrap is 0.32.1. For Red App development only the latter is required (react-bootstrap is going to be present in runtime), so please make sure that the npm repository that you are using contains @types/react-bootstrap package in the current version.

Using react-bootstrap in typescript

import * as React from "react";

import { AbstractModel } from "sabre-ngv-app/app/AbstractModel";
import { Data } from "../services/LocalStore";
import { connect } from "react-redux";
import { getService } from "../Context";
import { LocalStoreHelperService } from "../services/LocalStoreHelperService";
import { Alert, Panel } from "react-bootstrap"; // (1)

const eventBus: AbstractModel = new AbstractModel();

export interface OwnState {
  someText: string;
}

export class SimpleTabControllerComponent extends React.Component<{ messageFromStore }, OwnState> {

  state: OwnState = {
    someText: "Component state"
  };

  private closePopovers = (): void => {
    eventBus.triggerOnEventBus("hide-popovers", "novice-menu");
  };

  render(): JSX.Element {
    return (
      <div>
        <Panel bsStyle="primary"> // (2)
          <Panel.Heading>
            <Panel.Title componentClass="h3"> Message from Redux</Panel.Title>
          </Panel.Heading>
          <Panel.Body>{this.props.messageFromStore}</Panel.Body>
        </Panel>
        <Alert bsStyle="warning">
          Change value using workflows modal
        </Alert>
      </div>
    );
  }
}

const mapStateToProps = (state: Data): { messageFromStore } => {
  const currentMessageName = getService(
    LocalStoreHelperService
  ).getCurrentMessageName();

  return {
    messageFromStore: state[currentMessageName]
  };
};

export const SimpleTabControllerComponentWithStore = connect<
  { messageFromStore },
  {},
  {}
>(mapStateToProps)(SimpleTabControllerComponent);

  1. Import of the necessary components from react-bootstrap

  2. Here we are creating a composite component using components provided by react-bootstrap.

The result of this is showcased in the com.sabre.redapp.example3.web.persistence sample.

For other react-bootstrap components please refer to its documentation and make sure you are using documentation for the version matching the one used in Sabre Red 360.