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

Overview

Eval results

Files

Navigation Components

Name: tessl/npm-react-bootstrap
Author: tessl

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

Capabilities

Navbar

Responsive navigation header with support for branding, navigation, and more.

/**
 * Navbar component for page navigation
 * @param variant - Color theme variant
 * @param expand - Breakpoint for navbar expansion
 * @param fixed - Fixed positioning
 * @param sticky - Sticky positioning
 */
function Navbar(props: NavbarProps): JSX.Element;

interface NavbarProps extends React.HTMLAttributes<HTMLElement> {
  /** Color theme variant */
  variant?: "light" | "dark";
  /** Breakpoint at which navbar expands */
  expand?: boolean | "sm" | "md" | "lg" | "xl" | "xxl";
  /** Fixed positioning */
  fixed?: "top" | "bottom";
  /** Sticky positioning */
  sticky?: "top" | "bottom";
  /** Background color */
  bg?: string;
  /** Component used for the root node */
  as?: React.ElementType;
  /** Bootstrap CSS class prefix */
  bsPrefix?: string;
}

NavbarBrand

Brand component for navbar branding.

/**
 * NavbarBrand component for branding
 * @param href - Link URL for brand
 */
function NavbarBrand(props: NavbarBrandProps): JSX.Element;

interface NavbarBrandProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
  /** Link URL */
  href?: string;
  /** Component used for the root node */
  as?: React.ElementType;
  /** Bootstrap CSS class prefix */
  bsPrefix?: string;
}

NavbarToggle

Toggle button for collapsible navbar content.

/**
 * NavbarToggle component for mobile navigation
 * @param children - Custom toggle content
 */
function NavbarToggle(props: NavbarToggleProps): JSX.Element;

interface NavbarToggleProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  /** Custom toggle content */
  children?: React.ReactNode;
  /** Accessibility label */
  "aria-label"?: string;
  /** Component used for the root node */
  as?: React.ElementType;
  /** Bootstrap CSS class prefix */
  bsPrefix?: string;
}

NavbarCollapse

Collapsible content wrapper for navbar.

/**
 * NavbarCollapse component for collapsible content
 */
function NavbarCollapse(props: NavbarCollapseProps): JSX.Element;

interface NavbarCollapseProps extends React.HTMLAttributes<HTMLDivElement> {
  /** Component used for the root node */
  as?: React.ElementType;
  /** Bootstrap CSS class prefix */
  bsPrefix?: string;
}

Navbar Usage Examples:

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

// Basic navbar
<Navbar bg="light" expand="lg">
  <Container>
    <Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
    <Navbar.Toggle aria-controls="navbar-nav" />
    <Navbar.Collapse id="navbar-nav">
      <Nav className="me-auto">
        <Nav.Link href="#home">Home</Nav.Link>
        <Nav.Link href="#about">About</Nav.Link>
      </Nav>
    </Navbar.Collapse>
  </Container>
</Navbar>

// Dark navbar with sticky positioning
<Navbar bg="dark" variant="dark" sticky="top" expand="md">
  <Navbar.Brand>My App</Navbar.Brand>
  <Nav className="me-auto">
    <Nav.Link href="#features">Features</Nav.Link>
    <Nav.Link href="#pricing">Pricing</Nav.Link>
  </Nav>
</Navbar>

Nav

Navigation component for creating navigational elements.

/**
 * Nav component for navigation links
 * @param variant - Navigation style variant
 * @param fill - Fill available space
 * @param justify - Justify content
 */
function Nav(props: NavProps): JSX.Element;

interface NavProps extends React.HTMLAttributes<HTMLElement> {
  /** Navigation style variant */
  variant?: "tabs" | "pills" | "underline";
  /** Fill available space */
  fill?: boolean;
  /** Justify content */
  justify?: boolean;
  /** Active navigation key */
  activeKey?: string;
  /** Selection handler */
  onSelect?: (eventKey: string | null, e: React.SyntheticEvent) => void;
  /** Component used for the root node */
  as?: React.ElementType;
  /** Bootstrap CSS class prefix */
  bsPrefix?: string;
}

NavLink

Navigation link component.

/**
 * NavLink component for navigation links
 * @param active - Active state
 * @param disabled - Disabled state
 * @param eventKey - Event key for selection
 */
function NavLink(props: NavLinkProps): JSX.Element;

interface NavLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
  /** Active state */
  active?: boolean;
  /** Disabled state */
  disabled?: boolean;
  /** Event key for selection */
  eventKey?: string;
  /** Component used for the root node */
  as?: React.ElementType;
  /** Bootstrap CSS class prefix */
  bsPrefix?: string;
}

NavDropdown

Dropdown navigation component.

/**
 * NavDropdown component for dropdown navigation
 * @param title - Dropdown title
 * @param id - Unique identifier
 */
function NavDropdown(props: NavDropdownProps): JSX.Element;

interface NavDropdownProps extends React.HTMLAttributes<HTMLElement> {
  /** Dropdown title */
  title: React.ReactNode;
  /** Unique identifier */
  id: string;
  /** Active state */
  active?: boolean;
  /** Disabled state */
  disabled?: boolean;
  /** Event key for selection */
  eventKey?: string;
  /** Bootstrap CSS class prefix */
  bsPrefix?: string;
}

Nav Usage Examples:

import { Nav } from "react-bootstrap";

// Tab navigation
<Nav variant="tabs" defaultActiveKey="/home">
  <Nav.Item>
    <Nav.Link href="/home">Home</Nav.Link>
  </Nav.Item>
  <Nav.Item>
    <Nav.Link eventKey="link-1">Option 1</Nav.Link>
  </Nav.Item>
  <Nav.Item>
    <Nav.Link eventKey="link-2">Option 2</Nav.Link>
  </Nav.Item>
</Nav>

// Pills navigation
<Nav variant="pills" fill>
  <Nav.Item>
    <Nav.Link eventKey="first">First</Nav.Link>
  </Nav.Item>
  <Nav.Item>
    <Nav.Link eventKey="second">Second</Nav.Link>
  </Nav.Item>
</Nav>

// Navigation with dropdown
<Nav>
  <Nav.Link href="#home">Home</Nav.Link>
  <NavDropdown title="Dropdown" id="nav-dropdown">
    <NavDropdown.Item eventKey="action1">Action</NavDropdown.Item>
    <NavDropdown.Item eventKey="action2">Another action</NavDropdown.Item>
    <NavDropdown.Divider />
    <NavDropdown.Item eventKey="action3">Something else</NavDropdown.Item>
  </NavDropdown>
</Nav>

Breadcrumb

Navigation component showing the current page's location within a hierarchy.

/**
 * Breadcrumb component for hierarchical navigation
 */
function Breadcrumb(props: BreadcrumbProps): JSX.Element;

interface BreadcrumbProps extends React.HTMLAttributes<HTMLElement> {
  /** Component used for the root node */
  as?: React.ElementType;
  /** Bootstrap CSS class prefix */
  bsPrefix?: string;
}

BreadcrumbItem

Individual breadcrumb item.

/**
 * BreadcrumbItem component for individual breadcrumb items
 * @param active - Active state
 * @param href - Link URL
 */
function BreadcrumbItem(props: BreadcrumbItemProps): JSX.Element;

interface BreadcrumbItemProps extends React.HTMLAttributes<HTMLElement> {
  /** Active state */
  active?: boolean;
  /** Link URL */
  href?: string;
  /** Link target */
  target?: string;
  /** Link title */
  title?: string;
  /** Component used for the root node */
  as?: React.ElementType;
  /** Bootstrap CSS class prefix */
  bsPrefix?: string;
}

Breadcrumb Usage Examples:

import { Breadcrumb } from "react-bootstrap";

<Breadcrumb>
  <Breadcrumb.Item href="#">Home</Breadcrumb.Item>
  <Breadcrumb.Item href="#">Library</Breadcrumb.Item>
  <Breadcrumb.Item active>Data</Breadcrumb.Item>
</Breadcrumb>

Pagination

Pagination component for navigating through pages.

/**
 * Pagination component for page navigation
 * @param size - Size variant
 */
function Pagination(props: PaginationProps): JSX.Element;

interface PaginationProps extends React.HTMLAttributes<HTMLElement> {
  /** Size variant */
  size?: "sm" | "lg";
  /** Component used for the root node */
  as?: React.ElementType;
  /** Bootstrap CSS class prefix */
  bsPrefix?: string;
}

PageItem

Individual pagination item.

/**
 * PageItem component for individual pagination items
 * @param disabled - Disabled state
 * @param active - Active state
 */
function PageItem(props: PageItemProps): JSX.Element;

interface PageItemProps extends React.HTMLAttributes<HTMLElement> {
  /** Disabled state */
  disabled?: boolean;
  /** Active state */
  active?: boolean;
  /** Link URL */
  href?: string;
  /** Component used for the root node */
  as?: React.ElementType;
  /** Bootstrap CSS class prefix */
  bsPrefix?: string;
}

Pagination Usage Examples:

import { Pagination } from "react-bootstrap";

<Pagination>
  <Pagination.First />
  <Pagination.Prev />
  <Pagination.Item>{1}</Pagination.Item>
  <Pagination.Ellipsis />
  <Pagination.Item active>{10}</Pagination.Item>
  <Pagination.Item>{11}</Pagination.Item>
  <Pagination.Item>{12}</Pagination.Item>
  <Pagination.Ellipsis />
  <Pagination.Item>{20}</Pagination.Item>
  <Pagination.Next />
  <Pagination.Last />
</Pagination>

Install with Tessl CLI