React Toolbox

A comprehensive library of React components that integrates seamlessly with react-bootstrap. Build modern, interactive applications faster with pre-built, customizable components.

Quick Start

Live Dashboard Demo | Interactive Examples | Dashboard Source Code

Installation

npm install @jasperoosthoek/react-toolbox

Required peer dependencies:

npm install react react-dom react-bootstrap bootstrap date-fns date-fns-tz react-dnd react-icons react-localization

Setup:

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

Try It Now

Online: Visit react-toolbox.vercel.app for interactive examples with copy-pasteable code (server-side rendered)

Locally:

git clone https://github.com/jasperoosthoek/react-toolbox.git
cd react-toolbox
npm install
npm run dev  # Interactive examples at localhost:5173

Documentation & Examples

Live Interactive Examples

• Interactive Examples - Live component playground with copy-pasteable code (SSR-enabled)
• Live Dashboard Demo - Complete real-world application
• Local Development - Run npm run dev for local examples with hot reload

Example Categories

The live examples include comprehensive demonstrations with working code you can copy and paste:

• DataTable Examples - Tables, pagination, editing, drag & drop
• Form Examples - Forms, validation, modals
• Button Examples - Icon buttons, confirmations
• Localization Examples - Multi-language support

Core Components

DataTable

Feature-rich data tables with sorting, pagination, search, drag & drop, and inline editing.

import { DataTable } from '@jasperoosthoek/react-toolbox';

<DataTable
  data={users}
  columns={columns}
  onClickRow={openEditModal}
/>

Form System

Comprehensive form management with validation, modals, and field components.

import { FormProvider, FormInput } from '@jasperoosthoek/react-toolbox';

<FormProvider formFields={formFields} onSubmit={handleSubmit}>
  <FormInput name="email" label="Email" type="email" />
</FormProvider>

Icon Buttons

30+ pre-built buttons with loading states and confirmation dialogs.

import { EditButton, DeleteConfirmButton } from '@jasperoosthoek/react-toolbox';

<EditButton onClick={handleEdit} loading={isLoading} />
<DeleteConfirmButton onDelete={handleDelete} />

Localization

Template string syntax with multi-language support.

import { LocalizationProvider, useLocalization } from '@jasperoosthoek/react-toolbox';

const { text } = useLocalization();
return <h1>{text`save`}</h1>;

See comprehensive examples: Visit the interactive examples or run npm run dev locally

Development

Available Scripts

npm run dev              # Start interactive examples locally (with SSR)
npm run build           # Build library for npm distribution
npm run test            # Run tests
npm run build:examples  # Build examples for deployment (react-toolbox.vercel.app)

Project Structure

src/
├── components/         # Library components
│   ├── buttons/       # Icon buttons, confirmations
│   ├── forms/         # Form system
│   ├── tables/        # DataTable components
│   └── ...
├── examples/          # Interactive examples (deployed to react-toolbox.vercel.app)
└── utils/             # Hooks and utilities

Testing & TypeScript

• Full TypeScript support with strict type checking
• Comprehensive test suite with Jest and React Testing Library
• Type definitions included in distribution

Contributing

Quick Setup

git clone https://github.com/jasperoosthoek/react-toolbox.git
cd react-toolbox
npm install
npm run dev

Guidelines

• Add working examples for new components
• Maintain test coverage
• Follow TypeScript best practices
• Update documentation as needed

Package Information

• TypeScript: Full type definitions included
• Tree Shaking: ES modules supported
• Bundle Size: Optimized for production
• SSR Compatible: Server-side rendering ready with 4x performance improvement
• Peer Dependencies: Uses your existing React/Bootstrap setup

Links

• NPM Package
• GitHub Repository
• Interactive Examples
• Live Dashboard Demo
• Dashboard Demo Source

License

MIT License - see LICENSE for details.

Built with React, TypeScript, and react-bootstrap