# RenderStateView
## Description
A utility component that manages different rendering states for data-driven components. RenderStateView provides a clean way to handle error, loading, empty, and filled states with customizable components for each state, making it perfect for data fetching scenarios where you need to display different content based on the presence, loading state, and error state of data.
## Aliases
- RenderStateView
- State Renderer
- Data State Manager
- Conditional Renderer
## Props Breakdown
**Extends:** Standalone interface (no HTML element inheritance)
| Prop | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| `className` | `string` | - | No | Additional CSS class names |
| `data` | `T \| null` | - | No | The data to render. If the data is null, the empty component will be rendered. If the data is not null, the filled component will be rendered. |
| `isLoading` | `boolean` | - | No | Whether data is currently loading |
| `errorData` | `Error \| string \| null` | - | No | Error data to trigger error state rendering |
| `filled` | `React.ComponentType<{ data: T } & P>` | - | No | Component to render when data is present |
| `empty` | `React.ComponentType` | - | No | Component to render when no data |
| `loading` | `React.ComponentType
` | - | No | Component to render during loading state |
| `error` | `React.ComponentType<{ error: Error \| string } & P>` | - | No | Component to render when error occurs |
This component does not add standard HTML attributes as it renders different components based on state.
## Examples
### Basic Data Loading States
```tsx
import { RenderStateView, Spinner, Text, Button } from '@delightui/components';
function BasicRenderStateExample() {
const [users, setUsers] = useState([]);
const [isLoading, setIsLoading] = useState(false);
const fetchUsers = async () => {
setIsLoading(true);
try {
// Simulate API call
await new Promise(resolve => setTimeout(resolve, 2000));
setUsers([
{ id: 1, name: 'John Doe', email: 'john@example.com' },
{ id: 2, name: 'Jane Smith', email: 'jane@example.com' }
]);
} catch (error) {
setUsers([]);
} finally {
setIsLoading(false);
}
};
const LoadingComponent = () => (
Loading users...
);
const EmptyComponent = () => (
No users found
Load Users
);
const FilledComponent = ({ data }: { data: any[] }) => (
Users ({data.length})
{data.map(user => (
{user.name}
{user.email}
))}
);
return (
Fetch Users
);
}
```
### Product Catalog with Search
```tsx
import { RenderStateView, Input, Text, Card, Button, Image } from '@delightui/components';
function ProductCatalogExample() {
const [products, setProducts] = useState([]);
const [isLoading, setIsLoading] = useState(false);
const [searchTerm, setSearchTerm] = useState('');
const searchProducts = async (term: string) => {
setIsLoading(true);
try {
await new Promise(resolve => setTimeout(resolve, 1000));
const allProducts = [
{ id: 1, name: 'Wireless Headphones', price: 199.99, image: '/images/headphones.jpg' },
{ id: 2, name: 'Smart Watch', price: 299.99, image: '/images/watch.jpg' },
{ id: 3, name: 'Bluetooth Speaker', price: 89.99, image: '/images/speaker.jpg' }
];
const filtered = term
? allProducts.filter(p => p.name.toLowerCase().includes(term.toLowerCase()))
: [];
setProducts(filtered);
} finally {
setIsLoading(false);
}
};
const LoadingSpinner = () => (
🔍 Searching products...
);
const EmptyState = () => (
No products found
Try searching for "headphones", "watch", or "speaker"
);
const ProductGrid = ({ data }: { data: any[] }) => (
{data.map(product => (
{product.name}
${product.price}
Add to Cart
))}
);
}
```
### Dashboard Analytics
```tsx
import { RenderStateView, Text, Card, ProgressBar, Button } from '@delightui/components';
function DashboardAnalyticsExample() {
const [analytics, setAnalytics] = useState(null);
const [isLoading, setIsLoading] = useState(false);
const loadAnalytics = async () => {
setIsLoading(true);
try {
await new Promise(resolve => setTimeout(resolve, 1500));
setAnalytics({
pageViews: 125840,
uniqueVisitors: 45230,
bounceRate: 32.5,
conversionRate: 4.2,
revenueGrowth: 12.8,
topPages: [
{ page: '/home', views: 25000 },
{ page: '/products', views: 18500 },
{ page: '/about', views: 12300 }
]
});
} finally {
setIsLoading(false);
}
};
const LoadingDashboard = () => (
{[1, 2, 3, 4].map(i => (
))}
📊 No Analytics Data
Analytics data is not available at the moment.
Reload Analytics
);
const AnalyticsDashboard = ({ data }: { data: any }) => (
Page Views
{data.pageViews.toLocaleString()}
Unique Visitors
{data.uniqueVisitors.toLocaleString()}
Bounce Rate
{data.bounceRate}%
Conversion Rate
{data.conversionRate}%
Top Pages
{data.topPages.map((page: any, index: number) => (
{page.page}
{page.views.toLocaleString()}
))}
);
return (
Analytics Dashboard
Refresh Data
);
}
```
### User Profile Management
```tsx
import { RenderStateView, Text, Card, Button, Image, Form, FormField, Input } from '@delightui/components';
function UserProfileExample() {
const [profile, setProfile] = useState(null);
const [isLoading, setIsLoading] = useState(false);
const [isEditing, setIsEditing] = useState(false);
const loadProfile = async () => {
setIsLoading(true);
try {
await new Promise(resolve => setTimeout(resolve, 1000));
setProfile({
name: 'John Doe',
email: 'john.doe@example.com',
avatar: '/images/avatar.jpg',
role: 'Senior Developer',
department: 'Engineering',
joinDate: '2022-03-15',
projects: 24
});
} finally {
setIsLoading(false);
}
};
const ProfileSkeleton = () => (
{[1, 2, 3, 4].map(i => (
))}
);
const EmptyProfile = () => (
👤 No Profile Found
Unable to load profile information.
Retry Loading
);
const ProfileDisplay = ({ data }: { data: any }) => (
{data.name}
{data.email}
{data.role} • {data.department}
setIsEditing(true)}>
Edit Profile
Join Date
{data.joinDate}
Projects
{data.projects}
Department
{data.department}
Role
{data.role}
);
return (
User Profile
Load Profile
)}
);
}
```
### Shopping Cart States
```tsx
import { RenderStateView, Text, Button, Card, Image } from '@delightui/components';
function ShoppingCartExample() {
const [cartItems, setCartItems] = useState([]);
const [isLoading, setIsLoading] = useState(false);
const loadCart = async () => {
setIsLoading(true);
try {
await new Promise(resolve => setTimeout(resolve, 800));
setCartItems([
{ id: 1, name: 'Wireless Mouse', price: 29.99, quantity: 2, image: '/images/mouse.jpg' },
{ id: 2, name: 'USB Cable', price: 12.99, quantity: 1, image: '/images/cable.jpg' }
]);
} finally {
setIsLoading(false);
}
};
const clearCart = () => {
setCartItems([]);
};
const CartLoading = () => (
🛒 Loading your cart...
);
const EmptyCart = () => (
🛒
Your cart is empty
Add some items to get started!
Load Sample Items
);
const CartWithItems = ({ data }: { data: any[] }) => {
const total = data.reduce((sum, item) => sum + (item.price * item.quantity), 0);
return (
Shopping Cart ({data.length} items)
Clear Cart
{data.map(item => (
{item.name}
Quantity: {item.quantity}
${(item.price * item.quantity).toFixed(2)}
))}
Total: ${total.toFixed(2)}
Proceed to Checkout
);
};
return (
);
}
```
### File Upload Manager
```tsx
import { RenderStateView, Text, Button, Card, ProgressBar } from '@delightui/components';
function FileUploadManagerExample() {
const [files, setFiles] = useState([]);
const [isLoading, setIsLoading] = useState(false);
const uploadFiles = async () => {
setIsLoading(true);
try {
await new Promise(resolve => setTimeout(resolve, 2000));
setFiles([
{ id: 1, name: 'document.pdf', size: '2.4 MB', status: 'completed', uploadDate: '2024-01-15' },
{ id: 2, name: 'image.jpg', size: '1.8 MB', status: 'completed', uploadDate: '2024-01-15' }
]);
} finally {
setIsLoading(false);
}
};
const UploadingState = () => (
📤 Uploading files...
65% complete
);
const NoFilesState = () => (
📁
No files uploaded
Drag and drop files here or click to upload
Upload Sample Files
);
const FilesList = ({ data }: { data: any[] }) => (
Uploaded Files ({data.length})
Upload More
{data.map(file => (
{file.name}
{file.size} • Uploaded {file.uploadDate}
Download
Delete
))}
);
return (
File Manager
);
}
```
### Error State Handling
```tsx
import { RenderStateView, Text, Button, Card } from '@delightui/components';
function ErrorStateExample() {
const [data, setData] = useState(null);
const [isLoading, setIsLoading] = useState(false);
const [errorData, setErrorData] = useState(null);
const fetchData = async (shouldFail = false) => {
setIsLoading(true);
setErrorData(null);
setData(null);
try {
await new Promise(resolve => setTimeout(resolve, 1000));
if (shouldFail) {
throw new Error('Network connection failed');
}
setData({ message: 'Data loaded successfully!', timestamp: new Date().toISOString() });
} catch (err) {
setErrorData(err instanceof Error ? err : 'Unknown error occurred');
} finally {
setIsLoading(false);
}
};
const LoadingComponent = () => (
⏳ Loading data...
);
const ErrorComponent = ({ error }: { error: Error | string }) => (
❌ Error Occurred
{typeof error === 'string' ? error : error.message}
fetchData(false)}>Retry
setErrorData(null)}>Dismiss
);
const EmptyComponent = () => (
📭 No data available
fetchData(false)} style={{ marginTop: '16px' }}>
Load Data
);
const SuccessComponent = ({ data }: { data: any }) => (
✅ Success!
{data.message}
Loaded at: {data.timestamp}
);
return (
Error State Demo
fetchData(false)}>Load Success
fetchData(true)}>Trigger Error
{ setData(null); setErrorData(null); }}>
Reset
);
}
```
### API Error Handling
```tsx
import { RenderStateView, Text, Button, Card } from '@delightui/components';
function ApiErrorExample() {
const [users, setUsers] = useState([]);
const [isLoading, setIsLoading] = useState(false);
const [apiError, setApiError] = useState(null);
const fetchUsers = async () => {
setIsLoading(true);
setApiError(null);
try {
const response = await fetch('/api/users');
if (!response.ok) {
throw new Error(`HTTP ${response.status}: ${response.statusText}`);
}
const userData = await response.json();
setUsers(userData);
} catch (err) {
setApiError(err instanceof Error ? err : new Error('Network request failed'));
setUsers([]);
} finally {
setIsLoading(false);
}
};
const LoadingUsers = () => (
👥 Loading users...
);
const ApiErrorDisplay = ({ error }: { error: Error }) => (
⚠️ API Error
{error.message}
Please check your network connection and try again
Retry Request
);
const NoUsers = () => (
👤 No users found
Load Users
);
const UsersList = ({ data }: { data: any[] }) => (
Users ({data.length})
{data.map(user => (
{user.name}
{user.email}
))}
);
return (
API Error Handling
Fetch Users
);
}
```