This package provides a number of React components styled with Bootstrap that can be used in your application.

This package is intended to provide pre-built components utilizing Bootstrap that you can drop in your app. If you want something more customizable, checkout our other packages.

Setup

Install the package into your project:

npm install @runly/bootstrap

The components in this package assume the Bootstrap css is already loaded on the page. You can include this from Bootstrap’s CDN:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />

All of the components in this package depend upon the RunlyProvider. Make sure to include that component at the top-level of your app.

RunProgress

The RunProgress component allows you to show a progress bar indicating a run’s status for a particular run. Once a run has completed, the component will optionally render a Retry button to rerun a job that has failed (either partially or fully). See the retry mechanism in action in our example web application walkthrough.

import React from "react";
import { RunProgress } from "@runly/bootstrap";

const MyStatusComponent = ({ org, runId }) => (
	<div>
		<h2>Stuff is Happening</h2>
		<p>
			We are doing the thing you just asked us to do.
			See below for progress.
		</p>

		<RunProgress org={org} runId={runId} />
	</div>
);

export default MyStatusComponent;

Props

org: string

The organization ID that the run belongs to.

runId: string

The ID of the run to show progress.

allowRetry: bool

Boolean flag that controls whether or not the component will show a Retry button if the run partially or fully fails. This defaults to true.

A run is considered failed if it completes with any status other than Successful. If the run does complete with a status of Successful but there are some failed items, this is considered a partial failure and the Retry button will render. Learn more about how Runly jobs can finish successfully while tolerating failures.

RunlyProvider

This just re-exports the RunlyProvider from @runly/ui for convenience.

import { RunlyProvider } from "@runly/bootstrap";