tessl/npm-reactstrap

React Bootstrap components providing stateless Bootstrap 5 components for React applications

—

Pending

Overview

Eval results

Files

Data Display Components

Name: tessl/npm-reactstrap
Author: tessl

Components for displaying data including tables, lists, badges, progress bars, pagination, and other data presentation elements.

Capabilities

Table

Bootstrap table component with extensive styling options for displaying tabular data.

/**
 * Bootstrap table component
 * @param props.bordered - Add borders to table and cells
 * @param props.borderless - Remove all borders
 * @param props.striped - Add zebra-striping to table rows
 * @param props.dark - Use dark table theme
 * @param props.hover - Enable hover state on table rows
 * @param props.responsive - Make table responsive (true or breakpoint string)
 * @param props.size - Table size ('sm' for small)
 * @param props.tag - HTML element to render as (default: 'table')
 * @param props.responsiveTag - HTML element for responsive wrapper (default: 'div')
 * @param props.className - Additional CSS classes
 * @param props.cssModule - CSS Module mapping object
 * @param props.children - Table content (thead, tbody, tr, td, etc.)
 */
function Table(props: {
  bordered?: boolean;
  borderless?: boolean;
  striped?: boolean;
  dark?: boolean;
  hover?: boolean;
  responsive?: boolean | string;
  size?: 'sm';
  tag?: React.ElementType;
  responsiveTag?: React.ElementType;
  className?: string;
  cssModule?: object;
  children?: React.ReactNode;
}): JSX.Element;

ListGroup

Bootstrap list group component for displaying lists of content.

/**
 * Bootstrap list group component
 * @param props.tag - HTML element to render as (default: 'ul')
 * @param props.flush - Remove borders and rounded corners
 * @param props.horizontal - Display list items horizontally (true or breakpoint)
 * @param props.className - Additional CSS classes
 * @param props.cssModule - CSS Module mapping object
 * @param props.children - ListGroupItem components
 */
function ListGroup(props: {
  tag?: React.ElementType;
  flush?: boolean;
  horizontal?: boolean | string;
  className?: string;
  cssModule?: object;
  children?: React.ReactNode;
}): JSX.Element;

ListGroupItem

Individual list group item component.

/**
 * Individual list group item
 * @param props.tag - HTML element to render as (default: 'li')
 * @param props.active - Mark item as active/current
 * @param props.disabled - Disable the item
 * @param props.color - Item background color theme
 * @param props.action - Make item actionable (clickable)
 * @param props.className - Additional CSS classes
 * @param props.cssModule - CSS Module mapping object
 * @param props.children - Item content
 */
function ListGroupItem(props: {
  tag?: React.ElementType;
  active?: boolean;
  disabled?: boolean;
  color?: string;
  action?: boolean;
  className?: string;
  cssModule?: object;
  children?: React.ReactNode;
  [key: string]: any;
}): JSX.Element;

Badge

Bootstrap badge component for labels, counts, and status indicators.

/**
 * Bootstrap badge component for labels and counts
 * @param props.color - Badge color theme (primary, secondary, success, etc.)
 * @param props.pill - Use pill-shaped badge with rounded corners
 * @param props.tag - HTML element to render as (default: 'span')
 * @param props.href - Make badge a clickable link
 * @param props.className - Additional CSS classes
 * @param props.cssModule - CSS Module mapping object
 * @param props.children - Badge content
 */
function Badge(props: {
  color?: string;
  pill?: boolean;
  tag?: React.ElementType;
  href?: string;
  className?: string;
  cssModule?: object;
  children?: React.ReactNode;
  [key: string]: any;
}): JSX.Element;

Progress

Bootstrap progress bar component for showing completion status.

/**
 * Bootstrap progress bar component
 * @param props.multi - Enable multiple progress bars
 * @param props.tag - HTML element to render as (default: 'div')
 * @param props.value - Progress value (0-100)
 * @param props.max - Maximum value (default: 100)
 * @param props.animated - Enable animated stripes
 * @param props.striped - Enable progress bar stripes
 * @param props.color - Progress bar color theme
 * @param props.bar - Direct bar styling (when not using multi)
 * @param props.className - Additional CSS classes for container
 * @param props.cssModule - CSS Module mapping object
 * @param props.barClassName - CSS classes for progress bar
 * @param props.barAriaValueText - ARIA value text for screen readers
 * @param props.barAriaLabelledBy - ARIA labelledby for screen readers
 * @param props.children - Progress bar content or multiple bars
 */
function Progress(props: {
  multi?: boolean;
  tag?: React.ElementType;
  value?: number;
  max?: number;
  animated?: boolean;
  striped?: boolean;
  color?: string;
  bar?: boolean;
  className?: string;
  cssModule?: object;
  barClassName?: string;
  barAriaValueText?: string;
  barAriaLabelledBy?: string;
  children?: React.ReactNode;
}): JSX.Element;

Pagination

Bootstrap pagination component for navigating through pages of content.

/**
 * Bootstrap pagination component
 * @param props.size - Pagination size ('sm' or 'lg')
 * @param props.tag - HTML element to render as (default: 'nav')
 * @param props.className - Additional CSS classes
 * @param props.cssModule - CSS Module mapping object
 * @param props.listClassName - CSS classes for pagination list
 * @param props.listTag - HTML element for list (default: 'ul')
 * @param props.children - PaginationItem components
 */
function Pagination(props: {
  size?: 'sm' | 'lg';
  tag?: React.ElementType;
  className?: string;
  cssModule?: object;
  listClassName?: string;
  listTag?: React.ElementType;
  children?: React.ReactNode;
}): JSX.Element;

PaginationItem

Individual pagination item component.

/**
 * Individual pagination item
 * @param props.active - Mark item as current page
 * @param props.disabled - Disable the item
 * @param props.tag - HTML element to render as (default: 'li')
 * @param props.className - Additional CSS classes
 * @param props.cssModule - CSS Module mapping object
 * @param props.children - PaginationLink or other content
 */
function PaginationItem(props: {
  active?: boolean;
  disabled?: boolean;
  tag?: React.ElementType;
  className?: string;
  cssModule?: object;
  children?: React.ReactNode;
}): JSX.Element;

PaginationLink

Pagination link component for clickable page navigation.

/**
 * Pagination link component
 * @param props.previous - Style as previous page link
 * @param props.next - Style as next page link
 * @param props.first - Style as first page link
 * @param props.last - Style as last page link
 * @param props.tag - HTML element to render as (default: 'a')
 * @param props.innerRef - Ref forwarding
 * @param props.className - Additional CSS classes
 * @param props.cssModule - CSS Module mapping object
 * @param props.href - Link URL
 * @param props.children - Link content
 */
function PaginationLink(props: {
  previous?: boolean;
  next?: boolean;
  first?: boolean;
  last?: boolean;
  tag?: React.ElementType;
  innerRef?: React.Ref;
  className?: string;
  cssModule?: object;
  href?: string;
  children?: React.ReactNode;
  [key: string]: any;
}): JSX.Element;

Spinner

Bootstrap spinner component for loading indicators.

/**
 * Bootstrap spinner loading indicator
 * @param props.type - Spinner type ('border' or 'grow')
 * @param props.size - Spinner size ('sm')
 * @param props.color - Spinner color theme
 * @param props.tag - HTML element to render as (default: 'div')
 * @param props.className - Additional CSS classes
 * @param props.cssModule - CSS Module mapping object
 * @param props.children - Spinner content (usually screen reader text)
 */
function Spinner(props: {
  type?: 'border' | 'grow';
  size?: 'sm';
  color?: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'light' | 'dark';
  tag?: React.ElementType;
  className?: string;
  cssModule?: object;
  children?: React.ReactNode;
}): JSX.Element;

Placeholder

Bootstrap placeholder component for loading skeletons and content placeholders.

/**
 * Bootstrap placeholder component for loading states
 * @param props.color - Placeholder color theme
 * @param props.size - Placeholder size ('xs', 'sm', 'lg')
 * @param props.tag - HTML element to render as (default: 'span')
 * @param props.animation - Animation type ('glow' or 'wave')
 * @param props.width - Width as percentage or string
 * @param props.className - Additional CSS classes
 * @param props.cssModule - CSS Module mapping object
 * @param props.xs - Column width for extra small screens
 * @param props.sm - Column width for small screens
 * @param props.md - Column width for medium screens
 * @param props.lg - Column width for large screens
 * @param props.xl - Column width for extra large screens
 * @param props.xxl - Column width for extra extra large screens
 * @param props.children - Placeholder content
 */
function Placeholder(props: {
  color?: string;
  size?: 'xs' | 'sm' | 'lg';
  tag?: React.ElementType;
  animation?: 'glow' | 'wave';
  width?: string | number;
  className?: string;
  cssModule?: object;
  xs?: string | number;
  sm?: string | number;
  md?: string | number;
  lg?: string | number;
  xl?: string | number;
  xxl?: string | number;
  children?: React.ReactNode;
}): JSX.Element;

PlaceholderButton

Placeholder button component for loading button states.

/**
 * Placeholder button component for loading states
 * @param props.color - Placeholder color theme
 * @param props.size - Placeholder size ('xs', 'sm', 'lg')
 * @param props.tag - HTML element to render as (default: 'span')
 * @param props.animation - Animation type ('glow' or 'wave')
 * @param props.width - Width as percentage or string
 * @param props.className - Additional CSS classes
 * @param props.cssModule - CSS Module mapping object
 * @param props.xs - Column width for extra small screens
 * @param props.sm - Column width for small screens
 * @param props.md - Column width for medium screens
 * @param props.lg - Column width for large screens
 * @param props.xl - Column width for extra large screens
 * @param props.xxl - Column width for extra extra large screens
 * @param props.children - Placeholder content
 */
function PlaceholderButton(props: {
  color?: string;
  size?: 'xs' | 'sm' | 'lg';
  tag?: React.ElementType;
  animation?: 'glow' | 'wave';
  width?: string | number;
  className?: string;
  cssModule?: object;
  xs?: string | number;
  sm?: string | number;
  md?: string | number;
  lg?: string | number;
  xl?: string | number;
  xxl?: string | number;
  children?: React.ReactNode;
}): JSX.Element;

Usage Examples

Basic Table

import { Table } from 'reactstrap';

function BasicTable() {
  return (
    <Table>
      <thead>
        <tr>
          <th>#</th>
          <th>First Name</th>
          <th>Last Name</th>
          <th>Username</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">1</th>
          <td>Mark</td>
          <td>Otto</td>
          <td>@mdo</td>
        </tr>
        <tr>
          <th scope="row">2</th>
          <td>Jacob</td>
          <td>Thornton</td>
          <td>@fat</td>
        </tr>
      </tbody>
    </Table>
  );
}

List Group

import { ListGroup, ListGroupItem } from 'reactstrap';

function BasicListGroup() {
  return (
    <ListGroup>
      <ListGroupItem>Cras justo odio</ListGroupItem>
      <ListGroupItem>Dapibus ac facilisis in</ListGroupItem>
      <ListGroupItem>Morbi leo risus</ListGroupItem>
      <ListGroupItem>Porta ac consectetur ac</ListGroupItem>
      <ListGroupItem>Vestibulum at eros</ListGroupItem>
    </ListGroup>
  );
}

Badges

import { Badge } from 'reactstrap';

function BadgeExample() {
  return (
    <div>
      <h1>Example heading <Badge color="secondary">New</Badge></h1>
      <h2>Example heading <Badge color="secondary">New</Badge></h2>
      <h3>Example heading <Badge color="secondary">New</Badge></h3>
      
      <Badge color="primary">Primary</Badge>{' '}
      <Badge color="success">Success</Badge>{' '}
      <Badge color="info" pill>Info Pill</Badge>{' '}
      <Badge color="warning" pill>Warning Pill</Badge>
    </div>
  );
}

Progress Bars

import { Progress } from 'reactstrap';

function ProgressExample() {
  return (
    <div>
      <Progress value="25" />
      <Progress color="success" value="50" />
      <Progress color="info" value="75" />
      <Progress color="warning" value="100" />
      
      <Progress striped value="25" />
      <Progress striped color="success" value="50" />
      
      <Progress animated value="75" />
    </div>
  );
}

Install with Tessl CLI