@conventioncatcorp/reactstrap

Stateless React components for Bootstrap 5. A maintained fork of reactstrap (v9), published to GitHub Packages.

# .npmrc
@conventioncatcorp:registry=https://npm.pkg.github.com

Getting Started

reactstrap 10 targets React 19+ and Bootstrap 5 and ships as ESM with bundled TypeScript types.

npm create vite@latest my-app -- --template react-ts
cd my-app
npm i @conventioncatcorp/reactstrap bootstrap

Import Bootstrap CSS once (e.g. src/main.tsx):

import 'bootstrap/dist/css/bootstrap.css';

Then use components:

import { Button } from '@conventioncatcorp/reactstrap';

Upgrading from 9.x? See v10-migration.md.

Dependencies

Required Peer Dependencies

These libraries are not bundled with Reactstrap and required at runtime:

• react >=19
• react-dom >=19
• bootstrap 5.x CSS (not a package dependency; you load it)

About the Project

This library contains React Bootstrap components that favor composition and control. The library does not depend on jQuery or Bootstrap javascript. However, Popper (@popperjs/core) is relied upon for advanced positioning of content like Tooltips, Popovers, and auto-flipping Dropdowns.

There are a few core concepts to understand in order to make the most out of this library.

1. Your content is expected to be composed via props.children rather than using named props to pass in Components.

   // Content passed in via props
   const Example = (props) => {
     return (
       <p>
         This is a tooltip{' '}
         <TooltipTrigger tooltip={TooltipContent}>example</TooltipTrigger>!
       </p>
     );
   };
   
   // Content passed in as children (Preferred)
   const PreferredExample = (props) => {
     return (
       <p>
         This is a{' '}
         <a href="#" id="TooltipExample">
           tooltip
         </a>{' '}
         example.
         <Tooltip target="TooltipExample">
           <TooltipContent />
         </Tooltip>
       </p>
     );
   };

2. Attributes in this library are used to pass in state, conveniently apply modifier classes, enable advanced functionality (like tether), or automatically include non-content based elements.

   Examples:

   • isOpen - current state for items like dropdown, popover, tooltip
   • toggle - callback for toggling isOpen in the controlling component
   • color - applies color classes, ex: <Button color="danger"/>
   • size - for controlling size classes. ex: <Button size="sm"/>
   • tag - customize component output by passing in an element name or Component
   • boolean based props (attributes) when possible for alternative style classes or visually-hidden content

Documentation

Storybook docs are deployed to this repo's GitHub Pages by .github/workflows/docs.yml (npm start locally). Upstream v9 docs: https://reactstrap.github.io

Contributing

Development

Requires Node 26 (nvm use) and npm.

npm ci              # install
npm start           # Storybook docs at http://localhost:8080/
npm test            # Vitest watch
npm run cover       # tests + coverage
npm run lint        # oxlint
npm run typecheck   # tsc
npm run build       # dist/ (Vite lib build + tsc declarations)

Releasing

Published from a local machine to GitHub Packages (.npmrc maps the @conventioncatcorp scope; your ~/.npmrc needs a token with write:packages for //npm.pkg.github.com/):

npm version <major|minor|patch>   # bumps package.json, commits and tags
npm publish                       # prepublishOnly runs typecheck, lint, tests and build
git push --follow-tags

Storybook docs deploy to GitHub Pages on every push to master.

In the wild

Organizations and projects using reactstrap

• airframe-react - demo - Airframe provides all the components a developer needs to build data-intensive web apps using React.
• component-template
• video-react
• CoreUI-Free-Bootstrap-Admin-Template - demo
• Admin dashboard example app built with reactstrap - demo
• DevExtreme React Grid - It's a stateless data grid built on top of reactstrap with paging, sorting, filtering, grouping, selection, editing and virtual scrolling features.
• DevExtreme React Chart - A chart built on top of reactstrap that visualizes data using a variety of series types, including bar, line, area, scatter, pie, and more.
• reactstrap-scrollspy - demo
• formstrap - demo - Let your reactstrap input component integrate seamlessly using Formik
• Jimu UI - demo - The UI library for ArcGIS Experience Builder mapping platform.

Submit a PR to add to this list!

Looking to build, document and publish reusable components built on top of reactstrap? Consider forking https://github.com/reactstrap/component-template to kickstart your project!