react-bootstrap-plugins

Production-grade Bootstrap 5 UI components for React 18+. Zero runtime dependencies. Tree-shakeable.

---

Components

Component	Guide	Description
DatePicker	DATEPICKER.md	Date, time, and datetime picker with popover calendar
SearchSelect	SEARCHSELECT.md	Filterable, searchable select dropdown
Label	LABEL.md	Bootstrap-styled form label with required indicator
TableLoading	TABLELOADING.md	Bootstrap 5 placeholder loading skeleton for table <tbody>
AutoTextarea	AUTOTEXTAREA.md	Auto-resizing textarea — grows with content up to maxRows/maxHeight, then scrolls
NavPills	NAVPILLS.md	Horizontal nav-pills tab strip with icons, dismissible pills, and "New" badges

Each component guide includes full prop tables, usage examples, import patterns, and dark mode behavior.

---

Features

• 🎯 Zero runtime dependencies — only React and React DOM as peer dependencies
• 🌳 Tree-shakeable — import only what you need; unused components are stripped at build time
• 🎨 Bootstrap 5 native — uses CSS custom properties (--bs-*), respects dark mode via [data-bs-theme="dark"]
• 📦 ESM + CJS dual format — works with any bundler (Vite, webpack, Turbopack, Rollup)
• 🔒 TypeScript ready — full .d.ts declarations included
• ♿ Accessible — ARIA attributes, keyboard navigation, screen-reader friendly
• 📱 Responsive — mobile-optimized layouts for all components

---

Installation

npm install react-bootstrap-plugins
# or
pnpm add react-bootstrap-plugins
# or
yarn add react-bootstrap-plugins

Peer Dependencies

Make sure you have React 18+ and Bootstrap 5 CSS loaded:

npm install react react-dom bootstrap

// In your app entry point
import 'bootstrap/dist/css/bootstrap.min.css'

CSS Imports

DatePicker requires a small CSS file for its popover calendar layout. Import it once in your app (e.g., in your root component or entry point):

// Recommended — uses the package exports map (works with Vite, webpack 5+, Turbopack, Rollup)
import 'react-bootstrap-plugins/css/plugins.css'

This resolves to dist/css/plugins.css via the package's exports map. No additional configuration is needed for modern bundlers.

Backward compatibility: The old path react-bootstrap-plugins/css/datepicker.css still works — it points to the same file. Prefer the new plugins.css path for new code.

Troubleshooting CSS import issues

If your bundler reports "Cannot find module" or fails to resolve the CSS import:

• Ensure you're on the latest version — prior versions may have had a packaging issue with nested CSS directories.

  pnpm update react-bootstrap-plugins

• For older webpack (v4) — you may need to use the full path if your version doesn't support the exports field.

  import 'react-bootstrap-plugins/dist/css/plugins.css'

• For Next.js — add the package to transpilePackages in next.config.mjs if not already present.

  transpilePackages: ['react-bootstrap-plugins']

• For TypeScript — if you get a type error on the CSS import, add a declaration file (most projects already have this for CSS modules).

  // src/types/css.d.ts
  declare module '*.css' { const content: string; export default content }

---

Import Patterns

All patterns are tree-shakeable. Your bundler will only include the code you actually import.

// Single component — smallest bundle (default import)
import DatePicker from 'react-bootstrap-plugins/DatePicker'
import SearchSelect from 'react-bootstrap-plugins/SearchSelect'
import Label from 'react-bootstrap-plugins/Label'
import TableLoading from 'react-bootstrap-plugins/TableLoading'
import AutoTextarea from 'react-bootstrap-plugins/AutoTextarea'
import NavPills from 'react-bootstrap-plugins/NavPills'

// Single component — named import
import { DatePicker } from 'react-bootstrap-plugins/DatePicker'
import { SearchSelect } from 'react-bootstrap-plugins/SearchSelect'
import { Label } from 'react-bootstrap-plugins/Label'
import { TableLoading } from 'react-bootstrap-plugins/TableLoading'
import { AutoTextarea } from 'react-bootstrap-plugins/AutoTextarea'
import { NavPills } from 'react-bootstrap-plugins/NavPills'

// Multiple named — barrel, tree-shaken
import { DatePicker, SearchSelect, Label, TableLoading, AutoTextarea, NavPills } from 'react-bootstrap-plugins'

// CSS (required for DatePicker and NavPills badges)
import 'react-bootstrap-plugins/css/plugins.css'

Every component supports both default and named imports — use whichever fits your codebase conventions.

---

Dark Mode

All components respect Bootstrap 5's dark mode. Set data-bs-theme="dark" on any parent element:

<html data-bs-theme="dark">
  <!-- DatePicker popover, dropdown, and all styling adapt automatically -->
</html>

Or toggle dynamically:

function App() {
  const [theme, setTheme] = useState('light')

  return (
    <div data-bs-theme={theme}>
      <DatePicker value={date} onChange={handleDate} />
    </div>
  )
}

---

Bundle Size

Import	Approx. Size (min+gzip)
DatePicker (with CSS)	~5.5 KB
SearchSelect	~1.2 KB
Label	~0.3 KB
TableLoading	~0.2 KB
AutoTextarea	~0.4 KB
NavPills	~0.5 KB
All six (barrel)	~7.6 KB

Measured with ESM, tree-shaken, minified, gzipped. Your actual size depends on your bundler configuration.

---

Browser Support

• Chrome 90+
• Firefox 90+
• Safari 15+
• Edge 90+

Requires ResizeObserver (all modern browsers), CSS Grid, and CSS Custom Properties.

---

Security

• All user content rendered as React text nodes — no raw HTML injection surfaces
• No dynamic code evaluation or runtime code generation
• DatePicker input is readOnly — displayed value is always the formatted date, never raw user input
• Synthetic events use safe, explicit value construction
• Popover content is isolated from the input DOM tree via React Portal

Report security issues to: security@allios.app

---

Development

# Clone and install
git clone https://github.com/allios/react-bootstrap-plugins.git
cd react-bootstrap-plugins
pnpm install

# Build
pnpm run build

# Watch mode (rebuild on changes)
pnpm run dev

Project Structure

src/
├── index.js              Barrel export
├── lib/cn.js             Internal classname utility
├── components/
│   ├── DatePicker.jsx    Date/time/datetime picker
│   ├── SearchSelect.jsx  Searchable select dropdown
│   ├── Label.jsx         Form label
│   ├── TableLoading.jsx  Table placeholder skeleton
│   ├── AutoTextarea.jsx  Auto-resizing textarea
│   ├── NavPills.jsx      Horizontal pill tab strip
│   └── *.d.ts            TypeScript declarations
└── css/
    └── plugins.css

---

License

MIT © Tumwesigye Robert

---

Related

• Bootstrap 5 — CSS framework this package integrates with
• React — UI library
• AlliOs — Multi-tenant SaaS ecosystem this package originated from