A collection of reusable, type-safe React components built with TypeScript. This monorepo contains production-ready components designed for modern web applications.
A flexible and powerful form component with built-in validation, error handling, and support for multi-step forms.
Features:
- 🎯 Type-safe - Built with TypeScript
- 🔧 Flexible field types - Text, email, password, textarea, select, checkbox, date, number
- ✅ Built-in validation - With custom validation support
- 🔄 Multi-step forms - Step-by-step form flows with progress indicators
- 📱 Responsive - Mobile-friendly design
- 🎨 Customizable - Easy to style and configure
- ⏳ Loading states - Built-in loading states for async operations
Location: /form
A sortable data table component with a clean interface for displaying tabular data.
Features:
- 📊 Sortable columns - Click headers to sort ascending/descending
- 🎨 Styled headers - Distinctive header styling
- 📱 Responsive - Horizontal scroll on smaller screens
- 🔤 Type support - Handles numbers and strings intelligently
- 💨 Performant - Memoized sorting for optimal performance
⚠️ Empty state handling - User-friendly empty data display
Location: /data-table
A performant infinite scroll component using the Intersection Observer API.
Features:
- 🚀 High performance - Uses Intersection Observer API
- 🎨 Customizable - Custom item rendering and loader components
- ⚙️ Configurable threshold - Control when to trigger loading
- 🔄 Loading states - Built-in loading indicators
- 📦 Generic typing - Works with any data type
- 🎯 Memory efficient - Only loads data as needed
Location: /infinite-scroll
Each component is a standalone React application. Navigate to the specific component directory to run it.
- Node.js (v14 or higher)
- npm or yarn
cd form
npm install
npm startOpen http://localhost:3000 to view it in the browser.
cd data-table
npm install
npm startOpen http://localhost:3000 to view it in the browser.
cd infinite-scroll
npm install
npm startOpen http://localhost:3000 to view it in the browser.
import { Form, FormField } from './Form';
const MyComponent = () => {
const fields: FormField[] = [
{
name: 'email',
label: 'Email Address',
type: 'email',
required: true,
placeholder: 'Enter your email'
},
{
name: 'password',
label: 'Password',
type: 'password',
required: true,
validation: {
minLength: 8,
custom: (value) => {
if (!/[A-Z]/.test(value)) {
return 'Password must contain at least one uppercase letter';
}
return null;
}
}
}
];
const handleSubmit = (data: Record<string, any>) => {
console.log('Form submitted:', data);
};
return (
<Form
fields={fields}
onSubmit={handleSubmit}
submitLabel="Sign In"
showReset={false}
/>
);
};import DataTable from './DataTable';
const MyComponent = () => {
const tableData = {
columns: [
{ label: 'Name', key: 'name' },
{ label: 'Age', key: 'age' },
{ label: 'City', key: 'city' }
],
rows: [
{ name: 'John Doe', age: 28, city: 'New York' },
{ name: 'Jane Smith', age: 34, city: 'San Francisco' },
{ name: 'Bob Johnson', age: 45, city: 'Chicago' }
]
};
return <DataTable data={tableData} />;
};import InfiniteScrollList from './InfiniteScrollList';
const MyComponent = () => {
const [items, setItems] = useState<string[]>([]);
const [hasMore, setHasMore] = useState(true);
const [isLoading, setIsLoading] = useState(false);
const loadMore = async () => {
setIsLoading(true);
// Simulate API call
const newItems = await fetchMoreItems();
setItems(prev => [...prev, ...newItems]);
setHasMore(newItems.length > 0);
setIsLoading(false);
};
return (
<InfiniteScrollList
items={items}
hasMore={hasMore}
loadMore={loadMore}
isLoading={isLoading}
renderItem={(item, index) => (
<div key={index}>{item}</div>
)}
threshold={300}
/>
);
};react-components/
├── form/ # Form component
│ ├── src/
│ │ ├── Form/
│ │ │ ├── Form.tsx # Main form component
│ │ │ └── index.ts
│ │ ├── App.tsx
│ │ ├── SimpleFormExample.tsx # Basic form example
│ │ └── MultiStepFormExample.tsx # Multi-step form example
│ ├── package.json
│ └── README.md
│
├── data-table/ # DataTable component
│ ├── src/
│ │ ├── DataTable/
│ │ │ └── DataTable.tsx # Main table component
│ │ └── App.tsx
│ └── package.json
│
└── infinite-scroll/ # Infinite scroll component
├── src/
│ ├── InfiniteScrollList/
│ │ └── InfiniteScrollList.tsx # Main scroll component
│ └── App.tsx
└── package.json
- React 18.2.0
- TypeScript 4.4.4+
- React Scripts 5.0.1
- Modern React Hooks (useState, useEffect, useMemo, useCallback, useRef)
- Intersection Observer API (for infinite scroll)
All components are designed to be easily customizable:
- Styling: Each component accepts className props and uses inline styles that can be overridden
- Behavior: Configurable through props
- Validation: Custom validation functions supported (Form component)
- Rendering: Custom render functions supported (Infinite Scroll component)
Each component directory includes test scripts:
npm testnpm run buildThis creates an optimized production build in the build folder.
In each component directory, you can run:
npm start- Runs the app in development modenpm test- Launches the test runnernpm run build- Builds the app for productionnpm run eject- Ejects from Create React App (one-way operation)
Contributions are welcome! Please feel free to submit a Pull Request.
This project is open source and available for use in your projects.
- Repository: react-components
- Owner: gs-ysingh
- Branch: main
For questions or feedback, please open an issue in the repository.
Built with ❤️ using React and TypeScript