or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

buttons.mdcards.mddata-display.mdfeedback.mdforms.mdindex.mdinteractive.mdlayout.mdnavigation.mdutilities.md
tile.json

tessl/npm-reactstrap

React Bootstrap components providing stateless Bootstrap 5 components for React applications

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/reactstrap@9.2.x

To install, run

npx @tessl/cli install tessl/npm-reactstrap@9.2.0

index.mddocs/

Reactstrap

Reactstrap is a comprehensive React component library providing stateless Bootstrap 5 components for React applications. It offers a complete set of React components that wrap Bootstrap's CSS classes and functionality, including navigation, layout, forms, feedback elements, and interactive components. The library is designed for maximum reusability across React applications requiring Bootstrap styling.

Package Information

  • Package Name: reactstrap
  • Package Type: npm
  • Language: JavaScript (React/JSX)
  • Installation: npm install reactstrap bootstrap
  • Bootstrap Version: Bootstrap 5
  • React Version: >=16.8.0

Core Imports

ESM (Recommended):

import { Button, Alert, Container, Row, Col } from 'reactstrap';

CommonJS:

const { Button, Alert, Container, Row, Col } = require('reactstrap');

Named imports for specific components:

import Button from 'reactstrap/lib/Button';
import Alert from 'reactstrap/lib/Alert';

Basic Usage

import React from 'react';
import { Button, Alert, Container, Row, Col } from 'reactstrap';
import 'bootstrap/dist/css/bootstrap.min.css';

function App() {
  return (
    <Container>
      <Row>
        <Col>
          <Alert color="success">
            Welcome to Reactstrap!
          </Alert>
          <Button color="primary" size="lg">
            Click me
          </Button>
        </Col>
      </Row>
    </Container>
  );
}

Architecture

Reactstrap components are organized into several categories:

  • Layout System: Bootstrap's grid system and container components
  • Navigation: Navbar, breadcrumbs, and navigation components
  • Forms: Input elements, form groups, and validation components
  • UI Components: Buttons, cards, badges, and display elements
  • Interactive Elements: Modals, dropdowns, tooltips, and collapse components
  • Feedback Systems: Alerts, toasts, and progress indicators
  • Data Display: Tables, lists, and pagination components

All components:

  • Accept standard HTML attributes via props spreading
  • Support CSS Modules through cssModule prop
  • Use tag prop for custom element rendering
  • Include TypeScript definitions
  • Forward refs through innerRef prop

Capabilities

Layout Components

Bootstrap's responsive grid system and container components for structuring page layouts.

// Container component for responsive layouts
function Container(props: {
  fluid?: boolean | string;
  tag?: React.ElementType;
  className?: string;
  cssModule?: object;
  children?: React.ReactNode;
}): JSX.Element;

// Grid row component
function Row(props: {
  noGutters?: boolean;
  form?: boolean;
  tag?: React.ElementType;
  className?: string;
  cssModule?: object;
  children?: React.ReactNode;
}): JSX.Element;

// Grid column component
function Col(props: {
  xs?: string | number | boolean | object;
  sm?: string | number | boolean | object;
  md?: string | number | boolean | object;
  lg?: string | number | boolean | object;
  xl?: string | number | boolean | object;
  xxl?: string | number | boolean | object;
  tag?: React.ElementType;
  className?: string;
  cssModule?: object;
  children?: React.ReactNode;
}): JSX.Element;

Layout Components

Navigation Components

Navigation bars, breadcrumbs, and navigation list components for site navigation.

// Bootstrap navigation bar
function Navbar(props: {
  light?: boolean;
  dark?: boolean;
  fixed?: string;
  sticky?: string;
  color?: string;
  expand?: boolean | string;
  tag?: React.ElementType;
  className?: string;
  cssModule?: object;
  children?: React.ReactNode;
}): JSX.Element;

// Navigation list component
function Nav(props: {
  tabs?: boolean;
  pills?: boolean;
  vertical?: boolean | string;
  horizontal?: string;
  justified?: boolean;
  fill?: boolean;
  navbar?: boolean;
  card?: boolean;
  tag?: React.ElementType;
  className?: string;
  cssModule?: object;
  children?: React.ReactNode;
}): JSX.Element;

Navigation Components

Button Components

Button elements including individual buttons, button groups, and dropdown buttons.

// Bootstrap button component
function Button(props: {
  active?: boolean;
  'aria-label'?: string;
  block?: boolean;
  color?: string;
  disabled?: boolean;
  outline?: boolean;
  size?: string;
  tag?: React.ElementType;
  innerRef?: React.Ref;
  close?: boolean;
  onClick?: (event: React.MouseEvent) => void;
  className?: string;
  cssModule?: object;
  children?: React.ReactNode;
}): JSX.Element;

// Button group container
function ButtonGroup(props: {
  size?: string;
  vertical?: boolean;
  tag?: React.ElementType;
  role?: string;
  className?: string;
  cssModule?: object;
  children?: React.ReactNode;
}): JSX.Element;

Button Components

Form Components

Form elements including inputs, labels, form groups, and validation components.

// Form input component
function Input(props: {
  type?: string;
  size?: string;
  bsSize?: string;
  state?: string;
  valid?: boolean;
  invalid?: boolean;
  tag?: React.ElementType;
  innerRef?: React.Ref;
  plaintext?: boolean;
  addon?: boolean;
  className?: string;
  cssModule?: object;
  [key: string]: any;
}): JSX.Element;

// Form group wrapper
function FormGroup(props: {
  row?: boolean;
  check?: boolean;
  inline?: boolean;
  disabled?: boolean;
  tag?: React.ElementType;
  className?: string;
  cssModule?: object;
  children?: React.ReactNode;
}): JSX.Element;

Form Components

Feedback Components

User feedback elements including alerts, modals, toasts, tooltips, and popovers.

// Bootstrap alert component
function Alert(props: {
  color?: string;
  isOpen?: boolean;
  toggle?: () => void;
  tag?: React.ElementType;
  className?: string;
  cssModule?: object;
  closeClassName?: string;
  closeAriaLabel?: string;
  fade?: boolean;
  transition?: object;
  innerRef?: React.Ref;
  children?: React.ReactNode;
}): JSX.Element;

// Bootstrap modal dialog
function Modal(props: {
  isOpen: boolean;
  toggle?: () => void;
  keyboard?: boolean;
  backdrop?: boolean | string;
  size?: string;
  centered?: boolean;
  scrollable?: boolean;
  fade?: boolean;
  className?: string;
  cssModule?: object;
  children?: React.ReactNode;
}): JSX.Element;

Feedback Components

Card Components

Bootstrap card components for displaying content in flexible containers.

// Bootstrap card container
function Card(props: {
  inverse?: boolean;
  color?: string;
  outline?: boolean;
  body?: boolean;
  tag?: React.ElementType;
  className?: string;
  cssModule?: object;
  children?: React.ReactNode;
}): JSX.Element;

// Card body content area
function CardBody(props: {
  tag?: React.ElementType;
  className?: string;
  cssModule?: object;
  children?: React.ReactNode;
}): JSX.Element;

Card Components

Interactive Components

Interactive elements including dropdowns, collapse, carousels, and accordion components.

// Dropdown container component
function Dropdown(props: {
  disabled?: boolean;
  direction?: string;
  group?: boolean;
  isOpen: boolean;
  nav?: boolean;
  inNavbar?: boolean;
  tag?: React.ElementType;
  toggle: () => void;
  className?: string;
  cssModule?: object;
  children?: React.ReactNode;
}): JSX.Element;

// Bootstrap collapse component
function Collapse(props: {
  isOpen: boolean;
  tag?: React.ElementType;
  className?: string;
  cssModule?: object;
  navbar?: boolean;
  delay?: object;
  onOpened?: () => void;
  onClosed?: () => void;
  children?: React.ReactNode;
}): JSX.Element;

Interactive Components

Data Display Components

Components for displaying data including tables, lists, badges, and progress bars.

// Bootstrap table component
function Table(props: {
  bordered?: boolean;
  borderless?: boolean;
  striped?: boolean;
  dark?: boolean;
  hover?: boolean;
  responsive?: boolean | string;
  size?: string;
  tag?: React.ElementType;
  responsiveTag?: React.ElementType;
  className?: string;
  cssModule?: object;
  children?: React.ReactNode;
}): JSX.Element;

// Bootstrap list group
function ListGroup(props: {
  tag?: React.ElementType;
  flush?: boolean;
  horizontal?: boolean | string;
  className?: string;
  cssModule?: object;
  children?: React.ReactNode;
}): JSX.Element;

Data Display Components

Utility Components and Exports

Utility functions, constants, contexts, and helper components.

// Utility namespace with helper functions
namespace Util {
  function mapToCssModules(className?: string, cssModule?: object): string;
  function omit(obj: object, omitKeys: string[]): object;
  function pick(obj: object, keys: string[]): object;
  const TransitionTimeouts: {
    Fade: number;
    Collapse: number;
    Modal: number;
    Carousel: number;
    Offcanvas: number;
  };
  const keyCodes: {
    esc: number;
    space: number;
    enter: number;
    tab: number;
    up: number;
    down: number;
  };
}

// Dropdown context for nested components
const DropdownContext: React.Context;

// Accordion context for nested components  
const AccordionContext: React.Context;

// Polyfill namespace for browser compatibility
namespace Polyfill {
  // Provides CustomEvent and Object.values polyfills
}

Utilities and Contexts

Types

// React type definitions used throughout Reactstrap
namespace React {
  type ReactNode = string | number | boolean | JSX.Element | ReactNode[] | null | undefined;
  type ElementType = string | ComponentType<any>;
  type Ref<T = any> = RefObject<T> | ((instance: T | null) => void) | null;
  interface RefObject<T> {
    current: T | null;
  }
  interface ComponentType<P = {}> {
    (props: P): ReactNode;
  }
  interface MouseEvent<T = Element> extends SyntheticEvent<T> {
    button: number;
    buttons: number;
    clientX: number;
    clientY: number;
    ctrlKey: boolean;
    metaKey: boolean;
    shiftKey: boolean;
    altKey: boolean;
  }
  interface SyntheticEvent<T = Element> {
    currentTarget: T;
    target: EventTarget & T;
    preventDefault(): void;
    stopPropagation(): void;
  }
}

// JSX element type for component returns
interface JSX {
  Element: any;
}

// CSS Module interface for styled components
interface CSSModule {
  [className: string]: string;
}

// Common props shared across components
interface BaseProps {
  tag?: React.ElementType;
  className?: string;
  cssModule?: CSSModule;
  children?: React.ReactNode;
}

// Color variants used across components
type Color = 
  | 'primary' 
  | 'secondary' 
  | 'success' 
  | 'info' 
  | 'warning' 
  | 'danger' 
  | 'light' 
  | 'dark';

// Size variants used across components
type Size = 'sm' | 'lg';