CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-react-bootstrap

Bootstrap 5 components built with React for modern web applications

—

Pending
Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

index.mddocs/

React Bootstrap

React Bootstrap is a comprehensive component library that provides Bootstrap 5 components built specifically for React applications. It offers a complete set of responsive UI components including layout, navigation, forms, buttons, overlays, and interactive elements, all implemented with modern React patterns and TypeScript support.

Package Information

  • Package Name: react-bootstrap
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install react-bootstrap bootstrap

Core Imports

import { Button, Container, Row, Col, Nav, Navbar } from "react-bootstrap";

For CommonJS:

const { Button, Container, Row, Col, Nav, Navbar } = require("react-bootstrap");

Basic Usage

import React from 'react';
import { Container, Row, Col, Button, Alert } from "react-bootstrap";

function App() {
  return (
    <Container>
      <Row>
        <Col>
          <Alert variant="success">
            Welcome to React Bootstrap!
          </Alert>
          <Button variant="primary" size="lg">
            Get Started
          </Button>
        </Col>
      </Row>
    </Container>
  );
}

Architecture

React Bootstrap is built around several key architectural patterns:

  • Component-Based: Each Bootstrap component is implemented as a React component with appropriate props
  • Responsive Design: Components support Bootstrap's responsive grid system and breakpoint-based props
  • Variant System: Most components use a variant prop system for styling (primary, secondary, success, etc.)
  • Compound Components: Complex components like Dropdown, Modal, and Accordion use compound component patterns
  • Context Integration: Many components use React Context for sharing state between parent and child components
  • Bootstrap Prefix: Components support custom CSS class prefixes via ThemeProvider for custom styling

Capabilities

Layout System

Foundation layout components for responsive grid systems and content organization.

interface ContainerProps {
  fluid?: boolean | string;
  as?: React.ElementType;
}

interface RowProps {
  xs?: number | "auto";
  sm?: number | "auto"; 
  md?: number | "auto";
  lg?: number | "auto";
  xl?: number | "auto";
  xxl?: number | "auto";
}

interface ColProps {
  xs?: number | "auto";
  sm?: number | "auto";
  md?: number | "auto"; 
  lg?: number | "auto";
  xl?: number | "auto";
  xxl?: number | "auto";
}

Layout Components

Navigation Components

Navigation components for menus, breadcrumbs, tabs and navigation bars.

interface NavbarProps {
  variant?: "light" | "dark";
  expand?: boolean | "sm" | "md" | "lg" | "xl" | "xxl";
  fixed?: "top" | "bottom";
  sticky?: "top" | "bottom";
}

interface NavProps {
  variant?: "tabs" | "pills" | "underline";
  fill?: boolean;
  justify?: boolean;
}

Navigation Components

Form Components

Comprehensive form controls with validation support and accessibility features.

interface FormControlProps {
  type?: string;
  size?: "sm" | "lg";
  isValid?: boolean;
  isInvalid?: boolean;
  placeholder?: string;
  value?: string;
  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
}

interface FormCheckProps {
  type?: "checkbox" | "radio" | "switch";
  id?: string;
  label?: React.ReactNode;
  checked?: boolean;
  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
}

Form Components

Button Components

Button components and button groups with multiple variants and states.

interface ButtonProps {
  variant?: "primary" | "secondary" | "success" | "danger" | "warning" | "info" | "light" | "dark" | "link" | "outline-primary" | "outline-secondary" | "outline-success" | "outline-danger" | "outline-warning" | "outline-info" | "outline-light" | "outline-dark";
  size?: "sm" | "lg";
  disabled?: boolean;
  active?: boolean;
  type?: "button" | "submit" | "reset";
  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
}

Button Components

Overlay Components

Modal dialogs, tooltips, popovers and off-canvas components for layered interfaces.

interface ModalProps {
  show?: boolean;
  onHide?: () => void;
  size?: "sm" | "lg" | "xl";
  fullscreen?: boolean | "sm-down" | "md-down" | "lg-down" | "xl-down" | "xxl-down";
  centered?: boolean;
  backdrop?: boolean | "static";
  keyboard?: boolean;
}

interface TooltipProps {
  id: string;
  children: React.ReactNode;
  placement?: "auto" | "top" | "bottom" | "left" | "right";
}

Overlay Components

Interactive Components

Dynamic components like carousels, accordions, dropdowns and collapsible content.

interface AccordionProps {
  defaultActiveKey?: string | string[];
  activeKey?: string | string[];
  onSelect?: (eventKey: string | null) => void;
  flush?: boolean;
}

interface CarouselProps {
  activeIndex?: number;
  onSelect?: (selectedIndex: number, e?: any) => void;
  controls?: boolean;
  indicators?: boolean;
  interval?: number | null;
  pause?: "hover" | false;
}

Interactive Components

Content Components

Content display components for cards, tables, alerts, badges and media content.

interface AlertProps {
  variant?: "primary" | "secondary" | "success" | "danger" | "warning" | "info" | "light" | "dark";
  dismissible?: boolean;
  onClose?: () => void;
}

interface CardProps {
  border?: "primary" | "secondary" | "success" | "danger" | "warning" | "info" | "light" | "dark";
  text?: "primary" | "secondary" | "success" | "danger" | "warning" | "info" | "light" | "dark" | "white" | "muted";
  bg?: "primary" | "secondary" | "success" | "danger" | "warning" | "info" | "light" | "dark";
}

Content Components

Utility Components

Provider components and utility elements for theming, SSR support, loading states, and layout utilities.

interface ThemeProviderProps {
  prefixes?: Record<string, string>;
  dir?: "ltr" | "rtl";
}

interface SSRProviderProps {
  children?: React.ReactNode;
}

interface SpinnerProps {
  animation?: "border" | "grow";
  size?: "sm";
  variant?: "primary" | "secondary" | "success" | "danger" | "warning" | "info" | "light" | "dark";
  role?: string;
  children?: React.ReactNode;
}

interface PlaceholderProps {
  animation?: "glow" | "wave";
  bg?: "primary" | "secondary" | "success" | "danger" | "warning" | "info" | "light" | "dark";
  size?: "xs" | "sm" | "lg";
  xs?: number;
  sm?: number;
  md?: number;
  lg?: number;
  xl?: number;
  xxl?: number;
}

interface RatioProps {
  aspectRatio?: "1x1" | "4x3" | "16x9" | "21x9" | string;
}

Usage Examples:

import { ThemeProvider, SSRProvider, Spinner, Placeholder, Ratio } from "react-bootstrap";

// Theme provider for custom prefixes
<ThemeProvider prefixes={{ btn: 'my-btn' }}>
  <App />
</ThemeProvider>

// SSR provider for server-side rendering
<SSRProvider>
  <App />
</SSRProvider>

// Loading spinners
<Spinner animation="border" role="status">
  <span className="visually-hidden">Loading...</span>
</Spinner>
<Spinner animation="grow" variant="primary" />

// Placeholder content
<Placeholder xs={6} />
<Placeholder className="w-75" />
<Placeholder animation="glow">
  <Placeholder xs={12} />
</Placeholder>

// Aspect ratio container
<Ratio aspectRatio="16x9">
  <iframe src="https://www.youtube.com/embed/..." title="YouTube video"></iframe>
</Ratio>

Utility Components

Hooks

useAccordionButton

Custom hook for creating accordion toggle functionality.

/**
 * Hook for creating accordion toggle functionality
 * @param eventKey - Key to identify accordion item
 * @param onClick - Optional click handler
 * @returns Click handler and aria props for accordion button
 */
function useAccordionButton(
  eventKey: string,
  onClick?: (event: React.MouseEvent) => void
): (event: React.MouseEvent) => void;

Theme Hooks

Bootstrap theme integration hooks from ThemeProvider.

/**
 * Gets component CSS class prefix from theme
 * @param prefix - Component prefix override
 * @param defaultPrefix - Default prefix if none set
 * @returns Resolved CSS class prefix
 */
function useBootstrapPrefix(prefix?: string, defaultPrefix?: string): string;

/**
 * Gets responsive breakpoints array from theme
 * @returns Array of breakpoint names
 */
function useBootstrapBreakpoints(): string[];

/**
 * Gets minimum breakpoint name from theme  
 * @returns Minimum breakpoint name
 */
function useBootstrapMinBreakpoint(): string;

/**
 * Checks if text direction is right-to-left
 * @returns True if RTL direction
 */
function useIsRTL(): boolean;

Common Types

type Variant = "primary" | "secondary" | "success" | "danger" | "warning" | "info" | "light" | "dark";

type Size = "sm" | "lg";

type Placement = "auto" | "top" | "bottom" | "left" | "right";

interface BsPrefixProps {
  bsPrefix?: string;
}

interface AsProps {
  as?: React.ElementType;
}

interface ResponsiveUtilityValue<T> {
  xs?: T;
  sm?: T;
  md?: T;
  lg?: T;
  xl?: T;
  xxl?: T;
}

interface BootstrapBreakpoint {
  span?: number | "auto";
  offset?: number;
  order?: number;
}

docs

buttons.md

content.md

forms.md

index.md

interactive.md

layout.md

navigation.md

overlays.md

utilities.md

tile.json