website·Indexed 29 days ago
https://www.rbk.caioedut.com/A comprehensive UI component library for web and native platforms. Features a wide array of components including Box, Grid, Modal, Drawer, and Form controls, along with specialized hooks like useBreakpoints and useTheme, and a robust type reference system for events and styling.
RbkScrollEvent type is dispatched by the onScroll listener. It extends the base RbkEvent and provides detailed information about the scroll position, dimensions, and content offsets of the scrolling element.type RbkScrollEvent<EventType, TargetType> = RbkEvent<EventType, TargetType> & {
handler: 'RbkScrollEvent';
width: number; // Width of the scroll view
height: number; // Height of the scroll view
contentWidth: number; // Width of the scrollable content
contentHeight: number; // Height of the scrollable content
offsetX: number; // Current horizontal scroll offset
offsetY: number; // Current vertical scroll offset
contentInset?: {
top: RbkUnit;
bottom: RbkUnit;
left: RbkUnit;
right: RbkUnit;
};
}
Badge component is used to highlight a status or a specific text value. It can be used as a standalone element or composed within other components (like Buttons) to indicate counts or notifications. It extends all Text props.import { Badge } from '@react-bulk/web'; // or '@react-bulk/native'
// Basic usage
<Badge>2</Badge>
// Using the value prop
<Badge value={1} />
// Using a dot indicator
<Badge dot />
// Custom colors
<Badge color="primary">primary</Badge>
<Badge color="#6fd6ff">custom</Badge>Backdrop component creates a box the size of the viewport rendered immediately beneath any element presented in fullscreen mode. It is available for both web and native platforms.import { Backdrop } from '@react-bulk/web'; // OR @react-bulk/nativeInputDate component provides a user interface for selecting dates via a calendar date picker. It is available for both web and native platforms.import { InputDate } from '@react-bulk/web'; // OR @react-bulk/native
// Basic usage
<InputDate value={new Date()} />ButtonGroup component is used to group multiple buttons into a single scrollable container. It can be imported from either @react-bulk/web or @react-bulk/native depending on the platform.import { ButtonGroup } from '@react-bulk/web'; // OR @react-bulk/nativeCard component is used to encapsulate the content and actions of a single subject. It functions as a Box with pre-applied backgroundColor, borderRadius, and padding styles. It is available for both web and native platforms.import { Card } from '@react-bulk/web'; // OR @react-bulk/native
const MyComponent = () => (
<Card>
<Text>Hello World!</Text>
</Card>
);List component is used to display virtual lists, rendering items on-demand to optimize performance when dealing with large datasets. It is available for both web and native platforms.import { List } from '@react-bulk/web'; // OR @react-bulk/nativeDivider component displays a thin line used to divide content. It can be rendered horizontally (default) or vertically. It extends all Box props for layout and spacing control.import { Divider } from '@react-bulk/web'; // Use '@react-bulk/native' for native apps
// Basic horizontal divider
<Divider my={3} />Progress component is used to display the progress of a task. It can be imported from either @react-bulk/web or @react-bulk/native depending on the platform.import { Progress } from '@react-bulk/web'; // OR @react-bulk/nativeLabel component is used to create captions for items in a user interface. It is available for both web and native platforms via the @react-bulk/web or @react-bulk/native packages. The component extends all props available to the Text component.import { Label } from '@react-bulk/web'; // OR @react-bulk/native
// Basic usage
<Label>Full name</Label>