tessl/npm-reactstrap

React Bootstrap components providing stateless Bootstrap 5 components for React applications

—

Pending

Overview

Eval results

Files

Feedback Components

Name: tessl/npm-reactstrap
Author: tessl

User feedback elements including alerts, modals, toasts, tooltips, popovers, and other interactive feedback components for communicating with users.

Capabilities

Alert

Bootstrap alert component for displaying contextual feedback messages with optional dismiss functionality.

/**
 * Bootstrap alert component for contextual feedback
 * @param props.color - Alert color theme (primary, secondary, success, info, warning, danger, light, dark)
 * @param props.isOpen - Control alert visibility
 * @param props.toggle - Function to dismiss alert
 * @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.closeClassName - CSS classes for close button
 * @param props.closeAriaLabel - ARIA label for close button
 * @param props.fade - Enable fade transition
 * @param props.transition - Transition configuration object
 * @param props.innerRef - Ref forwarding
 * @param props.children - Alert content
 */
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;

Modal

Bootstrap modal dialog component for displaying overlay content with backdrop and keyboard interaction support.

/**
 * Bootstrap modal dialog component
 * @param props.isOpen - Control modal visibility (required)
 * @param props.toggle - Function to toggle modal visibility
 * @param props.keyboard - Close modal on Escape key (default: true)
 * @param props.backdrop - Show backdrop and close on click (true, false, 'static')
 * @param props.size - Modal size ('sm', 'lg', 'xl')
 * @param props.centered - Center modal vertically
 * @param props.scrollable - Make modal body scrollable
 * @param props.fade - Enable fade transition (default: true)
 * @param props.className - CSS classes for modal container
 * @param props.wrapClassName - CSS classes for modal wrapper
 * @param props.modalClassName - CSS classes for modal element
 * @param props.backdropClassName - CSS classes for backdrop
 * @param props.contentClassName - CSS classes for modal content
 * @param props.cssModule - CSS Module mapping object
 * @param props.zIndex - Z-index for modal (default: 1050)
 * @param props.role - ARIA role (default: 'dialog')
 * @param props.labelledBy - ARIA labelledby attribute
 * @param props.container - Container element for portal
 * @param props.onEnter - Callback when modal starts opening
 * @param props.onExit - Callback when modal starts closing
 * @param props.onOpened - Callback when modal finishes opening
 * @param props.onClosed - Callback when modal finishes closing
 * @param props.children - Modal content (ModalHeader, ModalBody, ModalFooter)
 */
function Modal(props: {
  isOpen: boolean;
  toggle?: () => void;
  keyboard?: boolean;
  backdrop?: boolean | 'static';
  size?: 'sm' | 'lg' | 'xl';
  centered?: boolean;
  scrollable?: boolean;
  fade?: boolean;
  className?: string;
  wrapClassName?: string;
  modalClassName?: string;
  backdropClassName?: string;
  contentClassName?: string;
  cssModule?: object;
  zIndex?: number;
  role?: string;
  labelledBy?: string;
  container?: Element | string;
  onEnter?: () => void;
  onExit?: () => void;
  onOpened?: () => void;
  onClosed?: () => void;
  children?: React.ReactNode;
}): JSX.Element;

ModalHeader

Modal header component with optional close button and title styling.

/**
 * Modal header component
 * @param props.tag - HTML element to render as (default: 'div')
 * @param props.wrapTag - HTML element for title wrapper (default: 'h4')
 * @param props.toggle - Function to close modal (shows close button)
 * @param props.className - Additional CSS classes
 * @param props.cssModule - CSS Module mapping object
 * @param props.children - Header content and title
 * @param props.close - Custom close button element
 * @param props.closeAriaLabel - ARIA label for close button
 * @param props.charCode - Character code for close button
 */
function ModalHeader(props: {
  tag?: React.ElementType;
  wrapTag?: React.ElementType;
  toggle?: () => void;
  className?: string;
  cssModule?: object;
  children?: React.ReactNode;
  close?: React.ReactNode;
  closeAriaLabel?: string;
  charCode?: number;
}): JSX.Element;

ModalBody

Modal body component for main modal content area.

/**
 * Modal body component for main content
 * @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 - Modal body content
 */
function ModalBody(props: {
  tag?: React.ElementType;
  className?: string;
  cssModule?: object;
  children?: React.ReactNode;
}): JSX.Element;

ModalFooter

Modal footer component for action buttons and secondary content.

/**
 * Modal footer component for actions and buttons
 * @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 - Footer content and buttons
 */
function ModalFooter(props: {
  tag?: React.ElementType;
  className?: string;
  cssModule?: object;
  children?: React.ReactNode;
}): JSX.Element;

Toast

Bootstrap toast component for showing temporary notifications and messages.

/**
 * Bootstrap toast notification component
 * @param props.isOpen - Control toast visibility
 * @param props.autoHide - Automatically hide toast after delay (default: true)
 * @param props.delay - Auto-hide delay in milliseconds (default: 5000)
 * @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.transition - Transition configuration
 * @param props.fade - Enable fade transition (default: true)
 * @param props.innerRef - Ref forwarding
 * @param props.children - Toast content (ToastHeader, ToastBody)
 */
function Toast(props: {
  isOpen?: boolean;
  autoHide?: boolean;
  delay?: number;
  tag?: React.ElementType;
  className?: string;
  cssModule?: object;
  transition?: object;
  fade?: boolean;
  innerRef?: React.Ref;
  children?: React.ReactNode;
}): JSX.Element;

ToastHeader

Toast header component with title, close button, and timestamp support.

/**
 * Toast header component
 * @param props.tag - HTML element to render as (default: 'div')
 * @param props.icon - Icon element or component
 * @param props.iconClassName - CSS classes for icon
 * @param props.wrapTag - HTML element for content wrapper (default: 'strong')
 * @param props.toggle - Function to close toast (shows close button)
 * @param props.className - Additional CSS classes
 * @param props.cssModule - CSS Module mapping object
 * @param props.children - Header content and title
 * @param props.close - Custom close button element
 * @param props.closeAriaLabel - ARIA label for close button
 * @param props.charCode - Character code for close button
 * @param props.small - Small text timestamp element
 */
function ToastHeader(props: {
  tag?: React.ElementType;
  icon?: React.ReactNode;
  iconClassName?: string;
  wrapTag?: React.ElementType;
  toggle?: () => void;
  className?: string;
  cssModule?: object;
  children?: React.ReactNode;
  close?: React.ReactNode;
  closeAriaLabel?: string;
  charCode?: number;
  small?: React.ReactNode;
}): JSX.Element;

ToastBody

Toast body component for main toast message content.

/**
 * Toast body component for message content
 * @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 - Toast message content
 */
function ToastBody(props: {
  tag?: React.ElementType;
  className?: string;
  cssModule?: object;
  children?: React.ReactNode;
}): JSX.Element;

Tooltip

Bootstrap tooltip component for displaying contextual information on hover or focus.

/**
 * Bootstrap tooltip component
 * @param props.placement - Tooltip placement relative to target
 * @param props.isOpen - Control tooltip visibility
 * @param props.target - Target element (ID, ref, or element)
 * @param props.container - Container element for tooltip portal
 * @param props.delay - Show/hide delay configuration
 * @param props.flip - Enable flip modifier to prevent overflow
 * @param props.offset - Offset from target element
 * @param props.className - CSS classes for tooltip container
 * @param props.popperClassName - CSS classes for Popper element
 * @param props.innerClassName - CSS classes for tooltip inner
 * @param props.disabled - Disable tooltip interactions
 * @param props.hideArrow - Hide tooltip arrow
 * @param props.placementPrefix - Prefix for placement classes
 * @param props.arrowClassName - CSS classes for arrow element
 * @param props.fade - Enable fade transition (default: true)
 * @param props.cssModule - CSS Module mapping object
 * @param props.children - Tooltip content
 */
function Tooltip(props: {
  placement?: 'auto' | 'top' | 'bottom' | 'left' | 'right';
  isOpen?: boolean;
  target: string | Element | React.RefObject;
  container?: string | Element;
  delay?: number | { show: number; hide: number };
  flip?: boolean;
  offset?: [number, number];
  className?: string;
  popperClassName?: string;
  innerClassName?: string;
  disabled?: boolean;
  hideArrow?: boolean;
  placementPrefix?: string;
  arrowClassName?: string;
  fade?: boolean;
  cssModule?: object;
  children?: React.ReactNode;
}): JSX.Element;

Popover

Bootstrap popover component for displaying rich content in an overlay with title and body sections.

/**
 * Bootstrap popover component for rich overlay content
 * @param props.placement - Popover placement relative to target
 * @param props.isOpen - Control popover visibility
 * @param props.target - Target element (ID, ref, or element)
 * @param props.container - Container element for popover portal
 * @param props.trigger - Trigger events ('click', 'hover', 'focus')
 * @param props.toggle - Function to toggle popover
 * @param props.delay - Show/hide delay configuration
 * @param props.flip - Enable flip modifier to prevent overflow
 * @param props.offset - Offset from target element
 * @param props.className - CSS classes for popover container
 * @param props.popperClassName - CSS classes for Popper element
 * @param props.innerClassName - CSS classes for popover inner
 * @param props.disabled - Disable popover interactions
 * @param props.hideArrow - Hide popover arrow
 * @param props.placementPrefix - Prefix for placement classes
 * @param props.arrowClassName - CSS classes for arrow element
 * @param props.fade - Enable fade transition (default: true)
 * @param props.cssModule - CSS Module mapping object
 * @param props.children - Popover content (PopoverHeader, PopoverBody)
 */
function Popover(props: {
  placement?: 'auto' | 'top' | 'bottom' | 'left' | 'right';
  isOpen?: boolean;
  target: string | Element | React.RefObject;
  container?: string | Element;
  trigger?: string;
  toggle?: () => void;
  delay?: number | { show: number; hide: number };
  flip?: boolean;
  offset?: [number, number];
  className?: string;
  popperClassName?: string;
  innerClassName?: string;
  disabled?: boolean;
  hideArrow?: boolean;
  placementPrefix?: string;
  arrowClassName?: string;
  fade?: boolean;
  cssModule?: object;
  children?: React.ReactNode;
}): JSX.Element;

PopoverHeader

Popover header component for titles and headings within popovers.

/**
 * Popover header component
 * @param props.tag - HTML element to render as (default: 'h3')
 * @param props.className - Additional CSS classes
 * @param props.cssModule - CSS Module mapping object
 * @param props.children - Header content and title
 */
function PopoverHeader(props: {
  tag?: React.ElementType;
  className?: string;
  cssModule?: object;
  children?: React.ReactNode;
}): JSX.Element;

PopoverBody

Popover body component for main popover content.

/**
 * Popover body component for main content
 * @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 - Popover body content
 */
function PopoverBody(props: {
  tag?: React.ElementType;
  className?: string;
  cssModule?: object;
  children?: React.ReactNode;
}): JSX.Element;

Uncontrolled Components

UncontrolledAlert

Self-managing alert that handles its own open/close state with optional auto-dismiss functionality.

/**
 * Self-managing alert component
 * @param props.defaultOpen - Initial open state (default: true)
 * @param ...otherProps - Same props as Alert except isOpen and toggle are handled internally
 */
function UncontrolledAlert(props: {
  defaultOpen?: boolean;
  color?: string;
  tag?: React.ElementType;
  className?: string;
  cssModule?: object;
  closeClassName?: string;
  closeAriaLabel?: string;
  fade?: boolean;
  children?: React.ReactNode;
}): JSX.Element;

UncontrolledTooltip

Self-managing tooltip that handles its own show/hide state based on hover and focus events.

/**
 * Self-managing tooltip component
 * @param props.defaultOpen - Initial open state
 * @param props.trigger - Trigger events ('hover', 'focus', 'click')
 * @param props.delay - Show/hide delay configuration
 * @param ...otherProps - Same props as Tooltip except isOpen is handled internally
 */
function UncontrolledTooltip(props: {
  defaultOpen?: boolean;
  trigger?: string;
  delay?: number | { show: number; hide: number };
  placement?: string;
  target: string | Element | React.RefObject;
  container?: string | Element;
  className?: string;
  cssModule?: object;
  children?: React.ReactNode;
}): JSX.Element;

UncontrolledPopover

Self-managing popover that handles its own show/hide state with configurable trigger events.

/**
 * Self-managing popover component
 * @param props.defaultOpen - Initial open state
 * @param props.trigger - Trigger events ('click', 'hover', 'focus')
 * @param props.delay - Show/hide delay configuration
 * @param ...otherProps - Same props as Popover except isOpen and toggle are handled internally
 */
function UncontrolledPopover(props: {
  defaultOpen?: boolean;
  trigger?: string;
  delay?: number | { show: number; hide: number };
  placement?: string;
  target: string | Element | React.RefObject;
  container?: string | Element;
  className?: string;
  cssModule?: object;
  children?: React.ReactNode;
}): JSX.Element;

Usage Examples

Basic Alerts

import { Alert } from 'reactstrap';

function BasicAlerts() {
  return (
    <div>
      <Alert color="primary">
        A simple primary alert—check it out!
      </Alert>
      <Alert color="success">
        A simple success alert—check it out!
      </Alert>
      <Alert color="danger">
        A simple danger alert—check it out!
      </Alert>
      <Alert color="warning">
        A simple warning alert—check it out!
      </Alert>
    </div>
  );
}

Dismissible Alert

function DismissibleAlert() {
  const [visible, setVisible] = useState(true);

  return (
    <Alert color="info" isOpen={visible} toggle={() => setVisible(false)}>
      I am an alert and I can be dismissed!
    </Alert>
  );
}

Uncontrolled Alert

import { UncontrolledAlert } from 'reactstrap';

function SimpleAlert() {
  return (
    <UncontrolledAlert color="info">
      I am an alert and I can be dismissed!
    </UncontrolledAlert>
  );
}

Basic Modal

import { 
  Modal, 
  ModalHeader, 
  ModalBody, 
  ModalFooter, 
  Button 
} from 'reactstrap';

function BasicModal() {
  const [modal, setModal] = useState(false);
  const toggle = () => setModal(!modal);

  return (
    <div>
      <Button color="danger" onClick={toggle}>
        Open Modal
      </Button>
      <Modal isOpen={modal} toggle={toggle}>
        <ModalHeader toggle={toggle}>Modal title</ModalHeader>
        <ModalBody>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
          eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </ModalBody>
        <ModalFooter>
          <Button color="primary" onClick={toggle}>
            Do Something
          </Button>{' '}
          <Button color="secondary" onClick={toggle}>
            Cancel
          </Button>
        </ModalFooter>
      </Modal>
    </div>
  );
}

Modal Sizes

function ModalSizes() {
  const [small, setSmall] = useState(false);
  const [large, setLarge] = useState(false);
  const [extraLarge, setExtraLarge] = useState(false);

  return (
    <div>
      <Button color="primary" onClick={() => setSmall(true)}>
        Small Modal
      </Button>
      <Button color="success" onClick={() => setLarge(true)}>
        Large Modal
      </Button>
      <Button color="info" onClick={() => setExtraLarge(true)}>
        Extra Large Modal
      </Button>

      <Modal size="sm" isOpen={small} toggle={() => setSmall(false)}>
        <ModalHeader>Small Modal</ModalHeader>
        <ModalBody>Small modal content</ModalBody>
      </Modal>

      <Modal size="lg" isOpen={large} toggle={() => setLarge(false)}>
        <ModalHeader>Large Modal</ModalHeader>
        <ModalBody>Large modal content</ModalBody>
      </Modal>

      <Modal size="xl" isOpen={extraLarge} toggle={() => setExtraLarge(false)}>
        <ModalHeader>Extra Large Modal</ModalHeader>
        <ModalBody>Extra large modal content</ModalBody>
      </Modal>
    </div>
  );
}

Toast Notifications

import { Toast, ToastHeader, ToastBody, Button } from 'reactstrap';

function ToastNotification() {
  const [toast, setToast] = useState(false);

  return (
    <div>
      <Button color="primary" onClick={() => setToast(true)}>
        Show Toast
      </Button>
      
      <div className="p-3 my-2 rounded" style={{position: 'fixed', top: 0, right: 0, zIndex: 1050}}>
        <Toast isOpen={toast}>
          <ToastHeader 
            icon="primary" 
            toggle={() => setToast(false)}
          >
            Reactstrap
          </ToastHeader>
          <ToastBody>
            Hello, world! This is a toast message.
          </ToastBody>
        </Toast>
      </div>
    </div>
  );
}

Tooltips

import { Button, Tooltip } from 'reactstrap';

function TooltipExample() {
  const [tooltipOpen, setTooltipOpen] = useState(false);

  return (
    <div>
      <Button id="TooltipExample" color="secondary">
        Hover over me
      </Button>
      <Tooltip
        placement="top"
        isOpen={tooltipOpen}
        target="TooltipExample"
        toggle={() => setTooltipOpen(!tooltipOpen)}
      >
        Hello world!
      </Tooltip>
    </div>
  );
}

Uncontrolled Tooltip

import { Button, UncontrolledTooltip } from 'reactstrap';

function SimpleTooltip() {
  return (
    <div>
      <Button id="UncontrolledTooltipExample" color="secondary">
        Hover over me
      </Button>
      <UncontrolledTooltip placement="top" target="UncontrolledTooltipExample">
        Hello world!
      </UncontrolledTooltip>
    </div>
  );
}

Popovers

import { 
  Button, 
  Popover, 
  PopoverHeader, 
  PopoverBody 
} from 'reactstrap';

function PopoverExample() {
  const [popoverOpen, setPopoverOpen] = useState(false);

  return (
    <div>
      <Button id="PopoverExample" color="info">
        Click me
      </Button>
      <Popover
        placement="bottom"
        isOpen={popoverOpen}
        target="PopoverExample"
        toggle={() => setPopoverOpen(!popoverOpen)}
      >
        <PopoverHeader>Popover Title</PopoverHeader>
        <PopoverBody>
          Sed posuere consectetur est at lobortis. Aenean eu leo quam.
        </PopoverBody>
      </Popover>
    </div>
  );
}

Uncontrolled Popover

import { 
  Button, 
  UncontrolledPopover, 
  PopoverHeader, 
  PopoverBody 
} from 'reactstrap';

function SimplePopover() {
  return (
    <div>
      <Button id="UncontrolledPopoverExample" color="info">
        Click me
      </Button>
      <UncontrolledPopover placement="bottom" target="UncontrolledPopoverExample">
        <PopoverHeader>Popover Title</PopoverHeader>
        <PopoverBody>
          Sed posuere consectetur est at lobortis. Aenean eu leo quam.
        </PopoverBody>
      </UncontrolledPopover>
    </div>
  );
}

Install with Tessl CLI