@bobsled/consumer-components

Bobsled Consumer Components

This repository contains the source code for the Bobsled Consumer Components. The Bobsled Consumer Components are a set of React components that can be used to build a consumer application that interacts with the Bobsled API.

Installation

To install the Bobsled Consumer Components, run the following command:

npm install @bobsled/consumer-components

Usage

To use the Bobsled Consumer Components, import the components you need from the @bobsled/consumer-components package and use them in your application.

import { DestinationSelector } from "@bobsled/consumer-components";
import type { Destination } from "@bobsled/consumer-components";

function App() {
  const handleOnSave = (destination: Destination) => {
    const { region, cloud } = destination;
    // ... do a call with these parameters
  };
  
  return (
    <div>
      <DestinationSelector onSave={(destination: Destination) => handleOnSave(destination)} />
    </div>
  );
}

If you are using Vanilla JS:

import { DestinationSelector } from "@bobsled/consumer-components";

function App() {
  const handleOnSave = (destination) => {
    const { region, cloud } = destination;
    // ... do a call with these parameters
  };
  
  return (
    <div>
      <DestinationSelector onSave={(destination) => handleOnSave(destination)} />
    </div>
  );
}

Theme customization

The Bobsled Consumer Components can be customized using CSS variables. The following CSS variables are available for customization:

:root {
  --bobsled-primary-color: #007bff;
  --bobsled-secondary-color: #6c757d;
  --bobsled-text-color: #333;
  --bobsled-background-color: #f8f9fa;
  --bobsled-border-color: #dee2e6;
  --bobsled-border-radius: 0.25rem;
}