DAlert
Alert component for displaying important messages with color variants and optional close button.
Basic Usage
import DAlert from '@dynamic-framework/ui-react';
function App() {
return (
<DAlert color="success">
Your changes have been saved successfully!
</DAlert>
);
}
Props
color
ComponentStateColor
default:"success"
Alert color - ‘success’, ‘danger’, ‘warning’, or ‘info’
Custom icon name (auto-selected based on color if not provided)
Close button click handler
Examples
Color Variants
Dismissible
Custom Icon
<DAlert color="success">
Operation completed successfully!
</DAlert>
<DAlert color="danger">
An error occurred. Please try again.
</DAlert>
<DAlert color="warning">
Please review your information before submitting.
</DAlert>
<DAlert color="info">
New features are now available.
</DAlert>
function DismissibleAlert() {
const [visible, setVisible] = useState(true);
if (!visible) return null;
return (
<DAlert
color="success"
showClose
onClose={() => setVisible(false)}
>
This alert can be dismissed!
</DAlert>
);
}
<DAlert color="info" icon="Bell">
You have 3 new notifications
</DAlert>
TypeScript Interface
type Props =
& BaseProps
& PropsWithChildren<{
id?: string;
color?: ComponentStateColor;
icon?: string;
iconFamilyClass?: string;
iconFamilyPrefix?: string;
iconMaterialStyle?: boolean;
showClose?: boolean;
iconClose?: string;
iconCloseFamilyClass?: string;
iconCloseFamilyPrefix?: string;
iconCloseMaterialStyle?: boolean;
onClose?: () => void;
}>;
DToast
Toast notification component with composable structure.
Basic Usage
import DToast from '@dynamic-framework/ui-react';
function App() {
return (
<DToast>
<DToast.Header>Notification</DToast.Header>
<DToast.Body>
Your action was completed successfully.
</DToast.Body>
</DToast>
);
}
Props
Subcomponents
Toast header section
DToast.Body
Toast body section
Example
<DToast>
<DToast.Header>
<strong className="me-auto">Success</strong>
<small>Just now</small>
</DToast.Header>
<DToast.Body>
Your transaction has been processed.
</DToast.Body>
</DToast>
TypeScript Interface
type Props = PropsWithChildren<BaseProps>;
function DToast(props: Props): JSX.Element;
DToast.Header: (props: PropsWithChildren<BaseProps>) => JSX.Element;
DToast.Body: (props: PropsWithChildren<BaseProps>) => JSX.Element;
DProgress
Progress bar component with percentage display and optional striped animation.
Basic Usage
import DProgress from '@dynamic-framework/ui-react';
function App() {
return (
<DProgress
currentValue={75}
maxValue={100}
/>
);
}
Props
Hides percentage text inside bar
Enables animated striped pattern
Custom height for progress bar
Examples
Basic
Custom Height
Animated
Without Label
Upload Progress
<DProgress currentValue={25} />
<DProgress currentValue={50} />
<DProgress currentValue={75} />
<DProgress currentValue={100} />
<DProgress
currentValue={60}
height="2rem"
/>
<DProgress
currentValue={45}
enableStripedAnimation
/>
<DProgress
currentValue={70}
hideCurrentValue
/>
function UploadProgress() {
const [progress, setProgress] = useState(0);
useEffect(() => {
const interval = setInterval(() => {
setProgress(prev => prev >= 100 ? 0 : prev + 10);
}, 500);
return () => clearInterval(interval);
}, []);
return (
<div>
<p>Uploading file...</p>
<DProgress
currentValue={progress}
enableStripedAnimation
/>
</div>
);
}
TypeScript Interface
type Props = BaseProps & {
currentValue: number;
minValue?: number;
maxValue?: number;
hideCurrentValue?: boolean;
enableStripedAnimation?: boolean;
height?: string | number;
};
DDataStateWrapper
Wrapper component for handling loading, error, and empty states in data fetching scenarios.
Basic Usage
import DDataStateWrapper from '@dynamic-framework/ui-react';
function App() {
const { data, isLoading, isError } = useQuery('users', fetchUsers);
return (
<DDataStateWrapper
isLoading={isLoading}
isError={isError}
data={data}
onRetry={refetch}
>
{(users) => (
<ul>
{users.map(user => (
<li key={user.id}>{user.name}</li>
))}
</ul>
)}
</DDataStateWrapper>
);
}
Props
Retry function called when error state retry button is clicked
Custom loading state renderer
Custom empty state renderer
Custom error state renderer
children
(data: T[]) => ReactNode
required
Render function that receives the data array
State Priority
The component handles states in this order:
- Loading state (when
isLoading is true)
- Error state (when
isError is true)
- Empty state (when data array is empty)
- Success state (renders children with data)
Examples
Basic
With Retry
Custom States
<DDataStateWrapper
isLoading={isLoading}
isError={isError}
data={transactions}
>
{(transactions) => (
<table>
<tbody>
{transactions.map(tx => (
<tr key={tx.id}>
<td>{tx.date}</td>
<td>{tx.amount}</td>
</tr>
))}
</tbody>
</table>
)}
</DDataStateWrapper>
<DDataStateWrapper
isLoading={isLoading}
isError={isError}
data={accounts}
onRetry={() => refetch()}
>
{(accounts) => (
<div>
{accounts.map(account => (
<DCard key={account.id}>
<DCard.Body>{account.name}</DCard.Body>
</DCard>
))}
</div>
)}
</DDataStateWrapper>
<DDataStateWrapper
isLoading={isLoading}
isError={isError}
data={items}
renderLoading={() => (
<div className="text-center p-5">
<DProgress currentValue={50} enableStripedAnimation />
<p>Loading your data...</p>
</div>
)}
renderEmpty={() => (
<div className="text-center p-5">
<p>No items found</p>
<DButton text="Add Item" onClick={handleAdd} />
</div>
)}
renderError={() => (
<DAlert color="danger">
Failed to load data. Please try again.
</DAlert>
)}
>
{(items) => (
<div>
{items.map(item => <div key={item.id}>{item.name}</div>)}
</div>
)}
</DDataStateWrapper>
TypeScript Interface
type Renderable = ReactNode | (() => ReactNode);
type DDataStateWrapperProps<T> = {
isLoading: boolean;
isError: boolean;
data: T[] | undefined;
onRetry?: () => void;
renderLoading?: Renderable;
renderEmpty?: Renderable;
renderError?: Renderable;
children: (data: T[]) => ReactNode;
};
export default function DDataStateWrapper<T>(props: DDataStateWrapperProps<T>): ReactNode;