rsuite

rsuite

Version 5.80.1
Published 2 days ago
23.5 MB
15 dependencies
MIT license

Install

npm i rsuite

yarn add rsuite

pnpm add rsuite

Overview

A suite of react components

Index

Variables

variable Accordion

const Accordion: AccordionComponent;

The Accordion component is used to display content that can be collapsed.
See Also
- https://rsuitejs.com/components/accordion

variable Affix

const Affix: RsRefForwardingComponent<'div', AffixProps>;

Components such as navigation, buttons, etc. can be fixed in the visible range. Commonly used for pages with long content, fixed the specified elements in the visible range of the page to assist in quick operation.
See Also
- https://rsuitejs.com/components/affix/

variable Animation

const Animation: AnimationAPI;

variable AutoComplete

const AutoComplete: PickerComponent<AutoCompleteProps<string>>;

Autocomplete function of input field.
See Also
- https://rsuitejs.com/components/auto-complete
  TODO: Remove unnecessary .rs-auto-complete element TODO: role=combobox and aria-autocomplete on input element

variable Avatar

const Avatar: RsRefForwardingComponent<'div', AvatarProps>;

The Avatar component is used to represent user or brand.
See Also
- https://rsuitejs.com/components/avatar

variable AvatarGroup

const AvatarGroup: RsRefForwardingComponent<'div', AvatarGroupProps>;

The AvatarGroup component is used to represent a collection of avatars.
See Also
- https://rsuitejs.com/components/avatar

variable Badge

const Badge: RsRefForwardingComponent<'div', BadgeProps>;

The Badge component is usually used to mark or highlight the status or quantity of an object.
See Also
- https://rsuitejs.com/components/badge

const Breadcrumb: BreadcrumbComponent;

The Breadcrumb component is used to indicate the current page location and navigate.
See Also
- https://rsuitejs.com/components/breadcrumb

variable Button

const Button: RsRefForwardingComponent<'button', ButtonProps>;

The Button component is used to trigger a custom action.
See Also
- https://rsuitejs.com/components/button

variable ButtonGroup

const ButtonGroup: RsRefForwardingComponent<'div', ButtonGroupProps>;

The ButtonGroup component is used to group a series of buttons together in a single line or column.
See Also
- https://rsuitejs.com/components/button/#button-group

variable ButtonToolbar

const ButtonToolbar: RsRefForwardingComponent<StackComponent, ButtonToolbarProps>;

The ButtonToolbar component is used to group a series of buttons together in a single line.
See Also
- https://rsuitejs.com/components/button/#button-toolbar

variable Calendar

const Calendar: RsRefForwardingComponent<
    RsRefForwardingComponent<'div', CalendarProps>,
    CalendarProps
>;

The Calendar component is used to select dates.
See Also
- https://rsuitejs.com/components/calendar

variable Card

const Card: CardComponent;

variable CardGroup

const CardGroup: RsRefForwardingComponent<'div', CardGroupProps>;

variable Carousel

const Carousel: RsRefForwardingComponent<'div', CarouselProps>;

The Carousel component is used to display a series of content.
See Also
- https://rsuitejs.com/components/carousel

variable Cascader

const Cascader: CascaderComponent;

The Cascader component displays a hierarchical list of options.
See Also
- https://rsuitejs.com/components/cascader

variable CascadeTree

const CascadeTree: CascadeTreeComponent;

CascadeTree is a component that displays tree-structured data in columns.
See Also
- https://rsuitejs.com/components/cascade-tree

variable Checkbox

const Checkbox: RsRefForwardingComponent<'div', CheckboxProps<ValueType>>;

The Checkbox component is used for selecting multiple options from a set.
See Also
- https://rsuitejs.com/components/checkbox

variable CheckboxGroup

const CheckboxGroup: RsRefForwardingComponent<
    'div',
    CheckboxGroupProps<ValueType[]>
>;

The CheckboxGroup component is used for selecting multiple options which are unrelated.
See Also
- https://rsuitejs.com/components/checkbox/#checkbox-group

variable CheckPicker

const CheckPicker: CheckPickerComponent;

A component for selecting checkable items in a dropdown list.
See Also
- https://rsuitejs.com/components/check-picker

variable CheckTree

const CheckTree: RsRefForwardingComponent<'div', CheckTreeProps<ValueType>>;

The CheckTree component is used for selecting multiple options which are organized in a tree structure.
See Also
- https://rsuitejs.com/components/check-tree

variable CheckTreePicker

const CheckTreePicker: PickerComponent<CheckTreePickerProps<ValueType>>;

The CheckTreePicker component is used for selecting multiple options which are organized in a tree structure.
See Also
- https://rsuitejs.com/components/check-tree-picker

variable Col

const Col: RsRefForwardingComponent<'div', ColProps>;

The Col component is used for layout and grids.
See Also
- https://rsuitejs.com/en/components/grid

variable Container

const Container: React.ForwardRefExoticComponent<any>;

The Container component is used to wrap content in a themed container with a max-width.
See Also
- https://rsuitejs.com/components/container

variable Content

const Content: RsRefForwardingComponent<'main', any>;

The Content component is used to wrap content in a themed container with a max-width.
See Also
- https://rsuitejs.com/components/container/
  For Internet Explorer 11 and lower, it's suggested that an ARIA role of "main" be added to the element to ensure it is accessible

variable DateInput

const DateInput: React.ForwardRefExoticComponent<any>;

The DateInput component lets users select a date with the keyboard. 5.58.0
See Also
- https://rsuitejs.com/components/date-input/

variable DatePicker

const DatePicker: RsRefForwardingComponent<'div', DatePickerProps>;

A date picker allows users to select a date from a calendar.
See Also
- https://rsuitejs.com/components/date-picker

variable DateRangeInput

const DateRangeInput: React.ForwardRefExoticComponent<any>;

The DateRangeInput component lets users select a date with the keyboard. 5.59.0
See Also
- https://rsuitejs.com/components/date-range-input/

variable DateRangePicker

const DateRangePicker: DateRangePickerComponent;

A date range picker allows you to select a date range from a calendar.
See Also
- https://rsuitejs.com/components/date-range-picker

variable Divider

const Divider: RsRefForwardingComponent<'div', DividerProps>;

The Divider component is used to separate content.
See Also
- https://rsuitejs.com/components/divider

variable DOMHelper

const DOMHelper: {
    isElement: (value: any) => value is HTMLElement;
    on: any;
    off: any;
    WheelHandler: any;
    DOMMouseMoveTracker: any;
    PointerMoveTracker: any;
    addClass: any;
    removeClass: any;
    hasClass: any;
    toggleClass: any;
    cancelAnimationFramePolyfill: typeof cancelAnimationFrame;
    requestAnimationFramePolyfill:
        | ((callback: FrameRequestCallback) => number)
        | ((callback: (t: number) => void) => NodeJS.Timeout);
    getAnimationEnd: any;
    ownerDocument: any;
    ownerWindow: any;
    getWindow: any;
    getContainer: any;
    canUseDOM: boolean;
    contains: (context: Element, node: Node & ParentNode) => boolean;
    scrollTop: any;
    scrollLeft: any;
    getOffset: any;
    nodeName: any;
    getOffsetParent: any;
    getPosition: any;
    isOverflowing: any;
    getScrollbarSize: any;
    getHeight: any;
    getWidth: any;
    isFocusable: any;
    getStyle: any;
    removeStyle: any;
    addStyle: any;
    translateDOMPositionXY: (
        style: CSSStyleDeclaration,
        x?: number | undefined,
        y?: number | undefined
    ) => CSSStyleDeclaration;
};

a wrapper of dom-lib with some custom methods.
See Also
- https://rsuitejs.com/components/dom-helper/

variable Drawer

const Drawer: DrawerComponent;

The Drawer component is used to display extra content from a main content.
See Also
- https://rsuitejs.com/components/drawer

const Dropdown: DropdownComponent;

The Dropdown component is used to select an option from a set of options.
See Also
- https://rsuitejs.com/components/dropdown
  The <Dropdown> API - When used inside <Sidenav>, renders a <TreeviewRootItem>; - Otherwise renders a <MenuRoot>

variable FlexboxGrid

const FlexboxGrid: FlexboxGridCompont;

The FlexboxGrid component is a box that can be used to layout other components.
See Also
- https://rsuitejs.com/components/flexbox-grid

const Footer: RsRefForwardingComponent<'footer', any>;

The <Footer> component is used to specify the footer of the page.
See Also
- https://rsuitejs.com/components/container/

variable Form

const Form: FormComponent;

The Form component is a form interface for collecting and validating user input.
See Also
- https://rsuitejs.com/components/form

variable Grid

const Grid: RsRefForwardingComponent<'div', GridProps>;

The Grid component is used to specify the layout of child elements in rows and columns.
See Also
- https://rsuitejs.com/components/grid

const Header: RsRefForwardingComponent<'header', any>;

The <Header> component is used to specify the header of the page.
See Also
- https://rsuitejs.com/components/container/

variable Heading

const Heading: RsRefForwardingComponent<'h3', HeadingProps>;

The Heading component is used to display a heading.
See Also
- https://rsuitejs.com/components/heading

variable HeadingGroup

const HeadingGroup: RsRefForwardingComponent<'hgroup', any>;

HeadingGroup is a group of headings.
See Also
- https://rsuitejs.com/components/heading

variable Highlight

const Highlight: RsRefForwardingComponent<'div', HighlightProps>;

Highlight the matching text in the content.
See Also
- https://rsuitejs.com/components/highlight

variable HStack

const HStack: StackComponent;

variable IconButton

const IconButton: RsRefForwardingComponent<
    RsRefForwardingComponent<'button', ButtonProps>,
    IconButtonProps & { ref?: React.Ref<HTMLElement> }
>;

The IconButton component is used to specify a button with icon.
See Also
- https://rsuitejs.com/components/button

variable Image

const Image: RsRefForwardingComponent<'img', ImageProps>;

variable InlineEdit

const InlineEdit: RsRefForwardingComponent<'div', InlineEditProps>;

variable Input

const Input: RsRefForwardingComponent<'input', InputProps>;

The <Input> component is used to get user input in a text field.
See Also
- https://rsuitejs.com/components/input

variable InputGroup

const InputGroup: InputGroupComponent;

The InputGroup component is used to specify an input field with an add-on.
See Also
- https://rsuitejs.com/components/input/#input-group

variable InputNumber

const InputNumber: React.ForwardRefExoticComponent<any>;

The InputNumber component is used to enter a numerical value.
See Also
- https://rsuitejs.com/components/input-number

variable InputPicker

const InputPicker: PickerComponent<InputPickerProps<any>>;

Single item selector with text box input.
See Also
- https://rsuitejs.com/components/input-picker

variable List

const List: ListComponent;

The List component is used to specify the layout of the list.
See Also
- https://rsuitejs.com/components/list

variable Loader

const Loader: RsRefForwardingComponent<'div', LoaderProps>;

The Loader component is used to indicate the loading state of a page or a section.
See Also
- https://rsuitejs.com/components/loader

variable MaskedInput

const MaskedInput: RsRefForwardingComponent<'input', MaskedInputProps>;

variable Message

const Message: RsRefForwardingComponent<'div', MessageProps>;

The Message component is used to display important messages to users.
See Also
- https://rsuitejs.com/components/message

const Modal: ModalComponent;

The Modal component is used to show content in a layer above the app.
See Also
- https://rsuitejs.com/components/modal

variable MultiCascader

const MultiCascader: MultiCascaderComponent;

The MultiCascader component is used to select multiple values from cascading options.
See Also
- https://rsuitejs.com/components/multi-cascader/

variable MultiCascadeTree

const MultiCascadeTree: React.ForwardRefExoticComponent<any>;

The MultiCascadeTree component is used to select multiple values from cascading options.
See Also
- https://rsuitejs.com/components/multi-cascade-tree/

variable Nav

const Nav: NavComponent;

The Nav component is used to create navigation links.
See Also
- https://rsuitejs.com/components/nav

const Navbar: NavbarComponent;

The Navbar component is used to create a navigation header.
See Also
- https://rsuitejs.com/components/navbar

variable Notification

const Notification: RsRefForwardingComponent<'div', NotificationProps>;

The Notification component is used to display global messages and notifications.
See Also
- https://rsuitejs.com/components/notification

const Pagination: RsRefForwardingComponent<'div', PaginationGroupProps>;

Pagination component for displaying page numbers.
See Also
- https://rsuitejs.com/components/pagination

variable Panel

const Panel: RsRefForwardingComponent<'div', PanelProps<string | number>>;

The Panel component is used to display content that can be collapsed.
See Also
- https://rsuitejs.com/components/panel

variable PanelGroup

const PanelGroup: React.ForwardRefExoticComponent<any>;

The PanelGroup component is used to display content that can be collapsed.
See Also
- https://rsuitejs.com/components/panel

variable Placeholder

const Placeholder: Placeholder;

The Placeholder component is used to display the loading state of the block.
See Also
- https://rsuitejs.com/components/placeholder

const Popover: RsRefForwardingComponent<'div', PopoverProps>;

The Popover component is used to display a popup window for a target component.
See Also
- https://rsuitejs.com/components/popover

variable Progress

const Progress: Progress;

The Progress component is used to display the progress of current operation.
See Also
- https://rsuitejs.com/components/progress

variable Radio

const Radio: React.ForwardRefExoticComponent<any>;

The Radio component is a simple radio button.
See Also
- https://rsuitejs.com/components/radio

variable RadioGroup

const RadioGroup: RsRefForwardingComponent<'div', RadioGroupProps<ValueType>>;

The RadioGroup component is used to group a collection of Radio components.
See Also
- https://rsuitejs.com/components/radio/#radio-group

variable RadioTile

const RadioTile: React.ForwardRefExoticComponent<any>;

A series of selectable tile components that behave like Radio. 5.35.0
See Also
- https://rsuitejs.com/components/radio-tile/

variable RadioTileGroup

const RadioTileGroup: RsRefForwardingComponent<
    'div',
    RadioTileGroupProps<ValueType>
>;

The RadioTileGroup component is used to group a collection of RadioTile components. 5.35.0
See Also
- https://rsuitejs.com/components/radio-tile/

variable RangeSlider

const RangeSlider: React.ForwardRefExoticComponent<any>;

The RangeSlider component is used to select a range from a given numerical range.
See Also
- https://rsuitejs.com/components/slider/

variable Rate

const Rate: RsRefForwardingComponent<'ul', RateProps<number>>;

The Rate component is used for rating. It can be used to evaluate the quality of the content.
See Also
- https://rsuitejs.com/components/rate/

variable Row

const Row: RsRefForwardingComponent<'div', RowProps>;

The Row component is used for layout and grids.
See Also
- https://rsuitejs.com/components/grid

variable SafeAnchor

const SafeAnchor: RsRefForwardingComponent<'a', SafeAnchorProps>;

A SafeAnchor is a wrapper around the <a> HTML element.

variable Schema

const Schema: {
    Model: any;
    Types: {
        StringType: typeof StringType;
        NumberType: typeof NumberType;
        ArrayType: typeof ArrayType;
        DateType: typeof DateType;
        ObjectType: typeof ObjectType;
        BooleanType: typeof BooleanType;
        MixedType: typeof MixedType;
    };
};

SchemaTyped is a wrapper of schema-typed library to provide a more friendly API. It is used to validate the data of the model.
See Also
- https://github.com/rsuite/schema-typed#schema-typed

variable SelectPicker

const SelectPicker: SelectPickerComponent;

The SelectPicker component is used to select an item from a list of data.
See Also
- https://rsuitejs.com/components/select-picker/

const Sidebar: RsRefForwardingComponent<'aside', SidebarProps>;

The Sidebar component for use with the Container component.
See Also
- https://rsuitejs.com/components/container/

variable Sidenav

const Sidenav: SidenavComponent;

The Sidenav component is an encapsulation of the page sidebar Nav.
See Also
- https://rsuitejs.com/components/sidenav/

variable Slider

const Slider: React.ForwardRefExoticComponent<any>;

A Slider is an interface for users to adjust a value in a specific range.
See Also
- https://rsuitejs.com/components/slider

variable Stack

const Stack: StackComponent;

The Stack component is a quick layout component through Flexbox, supporting vertical and horizontal stacking, custom spacing and line wrapping.
See Also
- https://rsuitejs.com/components/stack

variable Stat

const Stat: StatComponent;

variable StatGroup

const StatGroup: RsRefForwardingComponent<'div', StatGroupProps>;

variable Steps

const Steps: StepsComponent;

The Steps component is used to guide users to complete tasks in accordance with the process.
See Also
- https://rsuitejs.com/components/steps

variable Table

const Table: (<Row extends RowDataType<any>, Key extends RowKeyType>(
    props: any
) => React.ReactElement) & {
    Cell: <Row_1 extends RowDataType<any>, Key_1 extends RowKeyType>(
        props: any
    ) => React.ReactElement<any, any>;
    Column: any;
    HeaderCell: <Row_2 extends RowDataType<any>, Key_2 extends RowKeyType>(
        props: any
    ) => React.ReactElement<any, any>;
    ColumnGroup: React.ForwardRefExoticComponent<any>;
};

The Table component is used to display data in a table.
See Also
- https://rsuitejs.com/components/table/

variable Tabs

const Tabs: TabsComponent;

Tabs are a set of layered sections of content, known as tab panels, that display one panel of content at a time.
5.53.0
See Also
- https://rsuitejs.com/components/tabs

variable Tag

const Tag: RsRefForwardingComponent<'div', TagProps>;

The Tag component is used to label and categorize. It can be used to mark the status of an object or classify it into different categories.
See Also
- https://rsuitejs.com/components/tag

const TagGroup: RsRefForwardingComponent<'div', any>;

The TagGroup component for use with the Tag component.
See Also
- https://rsuitejs.com/components/tag/

variable TagInput

const TagInput: PickerComponent<TagInputProps>;

The TagInput component is an enhancement of Input and supports input tags and management tags.
See Also
- https://rsuitejs.com/components/tag-input

variable TagPicker

const TagPicker: PickerComponent<TagPickerProps<any>>;

TagPicker component enables multi-selection by tags and supports new options.
See Also
- https://rsuitejs.com/components/tag-picker/

variable Text

const Text: RsRefForwardingComponent<'p', TextProps>;

The Text component is used to display text.
See Also
- https://rsuitejs.com/components/text

variable Timeline

const Timeline: TimelineComponent;

The Timeline component is used to display a list of items in chronological order.
See Also
- https://rsuitejs.com/components/timeline

variable TimePicker

const TimePicker: PickerComponent<TimePickerProps>;

variable TimeRangePicker

const TimeRangePicker: PickerComponent<TimeRangePickerProps>;

variable toaster

const toaster: Toaster;

variable Toggle

const Toggle: RsRefForwardingComponent<'label', ToggleProps>;

The Toggle component is used to activate or deactivate an element.
See Also
- https://rsuitejs.com/components/toggle

const Tooltip: RsRefForwardingComponent<'div', TooltipProps>;

The Tooltip component is used to describe a element.
See Also
- https://rsuitejs.com/components/tooltip

variable Tree

const Tree: RsRefForwardingComponent<'div', TreeProps<string | number>>;

The Tree component is used to display hierarchical data.
See Also
- https://rsuitejs.com/components/tree

variable TreePicker

const TreePicker: PickerComponent<TreePickerProps<string | number>>;

The TreePicker component is used for selecting single options which are organized in a tree structure.
See Also
- https://rsuitejs.com/components/tree-picker/

variable Uploader

const Uploader: React.ForwardRefExoticComponent<any>;

The Uploader component is used to upload files.
See Also
- https://rsuitejs.com/components/uploader

variable useMediaQuery

const useMediaQuery: (query: string | string[]) => boolean[];

variable VisuallyHidden

const VisuallyHidden: RsRefForwardingComponent<'span', any>;

VisuallyHidden is a component that visually hides its children while keeping them accessible to screen readers.
5.52.0
See Also
- https://rsuitejs.com/components/visually-hidden/

variable VStack

const VStack: StackComponent;

variable Whisper

const Whisper: React.ForwardRefExoticComponent<any>;

The Whisper component is used to display a floating element. It is usually used with the Tooltip and Popover components.
See Also
- https://rsuitejs.com/components/whisper

Functions

function CustomProvider

CustomProvider: (
    props: Omit<CustomProviderProps, 'toasters'>
) => React.JSX.Element;

CustomProvider is used to provide global configuration, such as language, theme, etc.
See Also
- https://rsuitejs.com/components/custom-provider

function useBreakpointValue

useBreakpointValue: <T = any>(
    breakpoints: Record<Query, T>,
    options?: UseBreakpointValueOptions<T>
) => T | undefined;

A React Hook that returns different values based on different screen sizes in responsive design. 5.63.0 Please note that this API is not stable and may change in the future.
Example 1
const fontSize = useBreakpointValue({ sm: "14px", lg: "24px" }, { defaultValue: "16px" }); const direction = useBreakpointValue({ sm: 'row' }, { defaultValue:'column' });
See Also
- https://rsuitejs.com/components/use-breakpoint-value

function useFormClassNames

useFormClassNames: ({
    classPrefix,
    className,
    fluid,
    layout,
    readOnly,
    plaintext,
    disabled,
}: Pick<
    FormProps,
    | 'classPrefix'
    | 'className'
    | 'fluid'
    | 'layout'
    | 'readOnly'
    | 'plaintext'
    | 'disabled'
>) => string;

Take props and return className for styles

function useToaster

useToaster: () => {
    push: (
        message: React.ReactNode,
        options?: ToastContainerProps
    ) => string | Promise<string | undefined> | undefined;
    remove: (key: string) => void;
    clear: () => void;
};

Toaster display brief, temporary notifications of actions, errors, or other events in an application. It is often used with the Message and Notification components.
Returns
toaster { push, remove, clear }
See Also
- https://rsuitejs.com/components/toaster/

Interfaces

interface AffixProps

interface AffixProps extends WithAsProps {}

property container

container?: HTMLElement | (() => HTMLElement);

Specify the container.

property onChange

onChange?: (fixed?: boolean) => void;

Callback after the state changes.

property onOffsetChange

onOffsetChange?: (offset?: Offset) => void;

Callback after the offset changes.

property top

top?: number;

Distance from top

interface AutoCompleteProps

interface AutoCompleteProps<T = string>
    extends WithAsProps,
        FormControlPickerProps<T, any, ItemDataType | string> {}

property autoComplete

autoComplete?: string;

AutoComplete Content

property filterBy

filterBy?: (value: string, item: ItemDataType) => boolean;

Custom filter function to determine whether the item will be displayed

property menuAutoWidth

menuAutoWidth?: boolean;

The width of the menu will automatically follow the width of the input box

property menuClassName

menuClassName?: string;

Additional classes for menu

property onBlur

onBlur?: React.FocusEventHandler;

Called on blur

property onClose

onClose?: () => void;

Called on close

property onFocus

onFocus?: React.FocusEventHandler;

Called on focus

property onKeyDown

onKeyDown?: (event: React.KeyboardEvent) => void;

The callback triggered by keyboard events.

property onMenuFocus

onMenuFocus?: (focusItemValue: any, event: React.KeyboardEvent) => void;

Called on menu focus

property onOpen

onOpen?: () => void;

Called on open

property onSelect

onSelect?: (value: any, item: ItemDataType, event: React.SyntheticEvent) => void;

Called when a option is selected

property open

open?: boolean;

Open the menu and control it

property placeholder

placeholder?: string;

Placeholder text

property placement

placement?: TypeAttributes.Placement;

The placement of component

property renderMenu

renderMenu?: (menu: React.ReactNode) => React.ReactNode;

Customizing the Rendering Menu list

property renderMenuItem

renderMenuItem?: (label: React.ReactNode, item: ItemDataType) => React.ReactNode;

Custom selected option

property selectOnEnter

selectOnEnter?: boolean;

When set to false, the Enter key selection function is invalid

property size

size?: TypeAttributes.Size;

A component can have different sizes

interface AvatarGroupProps

interface AvatarGroupProps extends WithAsProps {}

property size

size?: Size;

Set the size of all avatars. xxl and xs added in v5.59.0

property spacing

spacing?: number;

Set the spacing of the avatar

property stack

stack?: boolean;

Render all avatars as stacks

interface AvatarProps

interface AvatarProps extends WithAsProps {}

property alt

alt?: string;

This attribute defines an alternative text description of the image

property bordered

bordered?: boolean;

Show a border around the avatar. 5.59.0

property circle

circle?: boolean;

Set avatar shape to circle

property color

color?: TypeAttributes.Color;

Sets the avatar background color. 5.59.0

property imgProps

imgProps?: React.ImgHTMLAttributes<HTMLImageElement>;

Attributes applied to the img element if the component is used to display an image. It can be used to listen for the loading error event.

property onError

onError?: OnErrorEventHandler;

Callback fired when the image failed to load. 5.59.0

property size

size?: Size;

A avatar can have different sizes.
'md' xxl and xs added in v5.59.0

property sizes

sizes?: string;

The sizes attribute for the img element.

property src

src?: string;

The src attribute for the img element.

property srcSet

srcSet?: string;

The srcSet attribute for the img element. Use this attribute for responsive image display.

interface BadgeProps

interface BadgeProps extends WithAsProps {}

property color

color?: TypeAttributes.Color;

A badge can have different colors

property content

content?: React.ReactNode;

Main content

property maxCount

maxCount?: number;

Max count

interface BasePaginationProps

interface PaginationProps extends WithAsProps {}

property activePage

activePage?: number;

Current page number

property boundaryLinks

boundaryLinks?: boolean;

Show border paging buttons 1 and pages

property disabled

disabled?: boolean | ((eventKey: number | string) => boolean);

Disabled component

property ellipsis

ellipsis?: boolean | React.ReactNode;

Displays the ellipsis

property first

first?: boolean | React.ReactNode;

Displays the first page

property last

last?: boolean | React.ReactNode;

Displays the last page

property linkAs

linkAs?: React.ElementType;

Customizes the element type for the component

property linkProps

linkProps?: Record<string, any>;

Additional props passed as-is to the underlying link for non-active items

property locale

locale?: PaginationLocale;

Custom locale

property maxButtons

maxButtons?: number;

Page buttons display the maximum number of

property next

next?: boolean | React.ReactNode;

Displays the next page

property onSelect

onSelect?: (eventKey: string | number, event: React.MouseEvent) => void;

callback function for pagination clicked

property pages

pages?: number;

Total pages

property prev

prev?: boolean | React.ReactNode;

Displays the prev page

property size

size?: TypeAttributes.Size;

A pagination can have different sizes

interface BreadcrumbItemProps

interface BreadcrumbItemProps extends WithAsProps<React.ElementType | string> {}

property active

active?: boolean;

The active state of the BreadcrumbItem.

property href

href?: string;

The href attribute specifies the URL of the page the link goes to.

property separator

separator?: React.ReactNode;

The separator between each breadcrumb item.

property target

target?: string;

The target attribute specifies where to open the linked document.

property title

title?: string;

The title attribute specifies extra information about an element.

property wrapperAs

wrapperAs?: React.ElementType;

The wrapper element of the BreadcrumbItem.

interface BreadcrumbProps

interface BreadcrumbProps extends WithAsProps {}

property ellipsis

ellipsis?: React.ReactNode;

The ellipsis element.

property locale

locale?: BreadcrumbLocale;

The locale of the component.

property maxItems

maxItems?: number;

Set the maximum number of breadcrumbs to display. When there are more than the maximum number, only the first and last will be shown, with an ellipsis in between.

property onExpand

onExpand?: (event: React.MouseEvent) => void;

Callback function for clicking the ellipsis.

property separator

separator?: React.ReactNode;

The separator between each breadcrumb item.

interface ButtonGroupProps

interface ButtonGroupProps extends WithAsProps {}

property block

block?: boolean;

Display block buttongroups

property disabled

disabled?: boolean;

A button can show it is currently unable to be interacted with

property justified

justified?: boolean;

Horizontal constant width layout

property role

role?: string;

An ARIA role describing the button group. Usually the default "group" role is fine. An aria-label or aria-labelledby prop is also recommended.

property size

size?: TypeAttributes.Size;

A button group can have different sizes

property vertical

vertical?: boolean;

Vertical layouts of button

interface ButtonProps

interface ButtonProps extends WithAsProps, React.HTMLAttributes<HTMLElement> {}

property active

active?: boolean;

A button can show it is currently the active user selection

property appearance

appearance?: TypeAttributes.Appearance;

A button can have different appearances.

property block

block?: boolean;

Format button to appear inside a content block

property color

color?: TypeAttributes.Color;

A button can have different colors

property disabled

disabled?: boolean;

A button can show it is currently unable to be interacted with

property endIcon

endIcon?: React.ReactNode;

The icon element placed _after_ the button text

property href

href?: string;

Providing a href will render an <a> element, _styled_ as a button

property loading

loading?: boolean;

A button can show a loading indicator

property ripple

ripple?: boolean;

Ripple after button click

property size

size?: TypeAttributes.Size;

A button can have different sizes

property startIcon

startIcon?: React.ReactNode;

The icon element placed _before_ the button text

property target

target?: string;

Where to display the linked URL

property type

type?: 'button' | 'reset' | 'submit';

Defines HTML button type attribute

interface ButtonToolbarProps

interface ButtonToolbarProps extends WithAsProps {}

property role

role?: string;

The ARIA role describing the button toolbar. Generally the default "toolbar" role is correct. An aria-label or aria-labelledby prop is also recommended.

interface CalendarLocale

interface CalendarLocale extends PickKeys<typeof defaultLocale.Calendar> {}

property dateLocale

dateLocale?: DateFnsLocale;

interface CalendarProps

interface CalendarProps extends WithAsProps {}

property bordered

bordered?: boolean;

Show border

property cellClassName

cellClassName?: (date: Date) => string | undefined;

Custom cell classes base on it's date

property compact

compact?: boolean;

Display a compact calendar

property defaultValue

defaultValue?: Date;

Default value

property isoWeek

isoWeek?: boolean;

ISO 8601 standard, each calendar week begins on Monday and Sunday on the seventh day
See Also
- https://en.wikipedia.org/wiki/ISO_week_date

property locale

locale?: CalendarLocale;

Custom locale object
See Also
- https://rsuitejs.com/guide/i18n/#calendar

property monthDropdownProps

monthDropdownProps?: MonthDropdownProps;

The props for the Month Dropdown component.

property onChange

onChange?: (date: Date) => void;

Callback fired before the value changed

property onMonthChange

onMonthChange?: (date: Date) => void;

Callback fired before the month changed @todo-Doma Change signature to onMonthChange(year: number, month: number, reason: string)?

property onSelect

onSelect?: (date: Date) => void;

Callback fired before the date selected

property renderCell

renderCell?: (date: Date) => React.ReactNode;

Custom render calendar cells

property value

value?: Date;

Controlled value

property weekStart

weekStart?: 0 | 1 | 2 | 3 | 4 | 5 | 6;

The index of the first day of the week (0 - Sunday) If isoWeek is true, the value of weekStart is ignored.
0

interface CardGroupProps

interface CardGroupProps extends WithAsProps {}

property columns

columns?: number;

The number of columns in the group

property spacing

spacing?: number | string;

Spacing between columns

interface CardProps

interface CardProps extends WithAsProps {}

property bordered

bordered?: boolean;

Show border

property direction

direction?: 'row' | 'column';

The direction of the card

property shaded

shaded?: boolean | 'hover';

Whether there is a shadow

property size

size?: 'lg' | 'md' | 'sm';

Different sizes

property width

width?: number | string;

The width of the card

interface CarouselProps

interface CarouselProps extends WithAsProps {}

property activeIndex

activeIndex?: number;

Active element index

property autoplay

autoplay?: boolean;

Autoplay element

property autoplayInterval

autoplayInterval?: number;

Autoplay interval

property defaultActiveIndex

defaultActiveIndex?: number;

Defaul initial index

property onSelect

onSelect?: (index: number, event: React.ChangeEvent<HTMLInputElement>) => void;

Callback fired when the active item manually changes

property onSlideEnd

onSlideEnd?: (
    index: number,
    event: React.TransitionEvent<HTMLDivElement>
) => void;

Callback fired when a slide transition ends

property onSlideStart

onSlideStart?: (
    index: number,
    event?: React.ChangeEvent<HTMLInputElement>
) => void;

Callback fired when a slide transition starts

property placement

placement?: 'top' | 'bottom' | 'left' | 'right';

Button placement

property shape

shape?: 'dot' | 'bar';

Button shape

interface CascaderProps

interface CascaderProps<T = DataItemValue>
    extends FormControlPickerProps<T, PickerLocale, ItemDataType<T>>,
        CascadeTreeProps<T, T, PickerLocale>,
        Pick<PickerToggleProps, 'label' | 'caretAs' | 'loading'> {}

property inline

inline?: boolean;

The panel is displayed directly when the component is initialized
See Also
- CascadeTree https://rsuitejs.com/components/cascade-tree
Deprecated
Use CascadeTree instead

property menuClassName

menuClassName?: string;

Custom menu class name
Deprecated
Use popupClassName instead

property menuHeight

menuHeight?: number | string;

Sets the height of the menu
Deprecated
Use columnHeight instead

property menuStyle

menuStyle?: React.CSSProperties;

Custom menu style
Deprecated
Use popupStyle instead

property menuWidth

menuWidth?: number;

Sets the width of the menu.
Deprecated
Use columnWidth instead

property onClean

onClean?: (event: React.SyntheticEvent) => void;

Called when clean

property parentSelectable

parentSelectable?: boolean;

When true, make the parent node selectable

property popupClassName

popupClassName?: string;

Custom popup style

property popupStyle

popupStyle?: React.CSSProperties;

Custom popup style

property renderMenu

renderMenu?: (
    items: readonly ItemDataType<T>[],
    menu: React.ReactNode,
    parentNode?: any,
    layer?: number
) => React.ReactNode;

Custom render menu
Deprecated
Use renderColumn instead

property renderMenuItem

renderMenuItem?: (
    node: React.ReactNode,
    item: ItemDataType<T>
) => React.ReactNode;

Custom render menu item
Deprecated
Use renderTreeNode instead

property renderValue

renderValue?: (
    value: T,
    selectedPaths: ItemDataType<T>[],
    selectedElement: React.ReactNode
) => React.ReactNode;

Custom render selected items

interface CascadeTreeProps

interface CascadeTreeProps<T = any, V = T, L = any>
    extends WithAsProps,
        DataProps<ItemDataType<T>> {}

property columnHeight

columnHeight?: number;

Sets the height of the menu

property columnWidth

columnWidth?: number;

Sets the width of the menu

property defaultValue

defaultValue?: V;

Initial value

property disabledItemValues

disabledItemValues?: ToArray<NonNullable<T>>;

Disabled items

property getChildren

getChildren?: (
    childNodes: ItemDataType<T>
) => ItemDataType<T>[] | Promise<ItemDataType<T>[]>;

Asynchronously load the children of the tree node.

property locale

locale?: Partial<L>;

A collection of localized strings.

property onChange

onChange?: (value: V, event: React.SyntheticEvent) => void;

Called after the value has been changed

property onSearch

onSearch?: (value: string, event: React.SyntheticEvent) => void;

Called when searching

property onSelect

onSelect?: (
    value: ItemDataType<T>,
    selectedPaths: ItemDataType<T>[],
    event: React.SyntheticEvent
) => void;

Called when the option is selected

property renderColumn

renderColumn?: (
    childNodes: React.ReactNode,
    column: CascadeColumn<T>
) => React.ReactNode;

Custom render columns

property renderSearchItem

renderSearchItem?: (
    node: React.ReactNode,
    items: ItemDataType<T>[]
) => React.ReactNode;

Custom render search items

property renderTreeNode

renderTreeNode?: (
    node: React.ReactNode,
    itemData: ItemDataType<T>
) => React.ReactNode;

Custom render tree node

property searchable

searchable?: boolean;

Whether dispaly search input box

property value

value?: V;

Selected value

interface CellProps

interface CellProps<Row extends RowDataType>
    extends Omit<TableCellProps<Row>, 'rowData' | 'dataKey'> {}

property dataKey

dataKey?: string | keyof Row;

Data binding key, but also a sort of key

property rowData

rowData?: Row;

Row Data

interface CheckboxGroupProps

interface CheckboxGroupProps<V = ValueType[]>
    extends WithAsProps,
        FormControlBaseProps<V> {}

property children

children?: React.ReactNode;

Primary content

property inline

inline?: boolean;

Inline layout

property name

name?: string;

Used for the name of the form

interface CheckboxProps

interface CheckboxProps<V = ValueType>
    extends WithAsProps,
        Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {}

property checkable

checkable?: boolean;

Whether to show checkbox
Used in MultiCascader

property checked

checked?: boolean;

Whether or not checkbox is checked.

property color

color?: TypeAttributes.Color;

The color of the checkbox when checked or indeterminate
5.56.0

property defaultChecked

defaultChecked?: boolean;

The initial value of checked.

property disabled

disabled?: boolean;

A checkbox can appear disabled and be unable to change states

property indeterminate

indeterminate?: boolean;

Whether or not checkbox is indeterminate.

property inline

inline?: boolean;

Inline layout
Used in CheckboxGroup

property inputProps

inputProps?: React.HTMLAttributes<HTMLInputElement>;

Attributes applied to the input element.

property inputRef

inputRef?: React.Ref<any>;

Pass a ref to the input element.

property labelClickable

labelClickable?: boolean;

Whether the label is clickable
Used in MultiCascader

property name

name?: string;

Used for the name of the form

property onChange

onChange?: (
    value: V | undefined,
    checked: boolean,
    event: React.ChangeEvent<HTMLInputElement>
) => void;

Called when the user attempts to change the checked state.

property onCheckboxClick

onCheckboxClick?: (event: React.SyntheticEvent) => void;

Called when the checkbox is clicked.
Used in MultiCascader

property onClick

onClick?: (event: React.SyntheticEvent) => void;

Called when the checkbox or label is clicked.

property plaintext

plaintext?: boolean;

Render the control as plain text

property readOnly

readOnly?: boolean;

Make the control readonly

property value

value?: V;

The HTML input value.

interface CheckPickerProps

interface CheckPickerProps<T = any>
    extends FormControlPickerProps<T[], PickerLocale, ItemDataType<T>>,
        Omit<SelectProps<T>, 'renderValue'>,
        Pick<PickerToggleProps, 'label' | 'caretAs' | 'loading'> {}

property countable

countable?: boolean;

A picker that can be counted

property renderValue

renderValue?: (
    value: T[],
    item: ItemDataType<T>[],
    selectedElement: React.ReactNode
) => React.ReactNode;

Custom render selected items

property sticky

sticky?: boolean;

Top the selected option in the options

interface CheckTreePickerProps

interface CheckTreePickerProps<V = ValueType>
    extends Omit<CheckTreeViewProps<V>, 'value' | 'onChange' | 'data'>,
        TreeExtraProps,
        DeprecatedPickerProps,
        FormControlPickerProps<V, PickerLocale, ItemDataType>,
        Pick<PickerToggleProps, 'caretAs' | 'loading'> {}

property countable

countable?: boolean;

A picker that can be counted

property popupAutoWidth

popupAutoWidth?: boolean;

Popup auto width
true

property popupClassName

popupClassName?: string;

Custom popup style

property popupStyle

popupStyle?: React.CSSProperties;

Custom popup style

property renderValue

renderValue?: (
    value: V,
    selectedNodes: TreeNode[],
    selectedElement: React.ReactNode
) => React.ReactNode;

Custom render selected items

property treeHeight

treeHeight?: number;

The height of the tree

interface CheckTreeProps

interface CheckTreeProps<T = ValueType>
    extends CheckTreeViewProps<T>,
        TreeExtraProps {}

property defaultValue

defaultValue?: T;

Default selected Value

property scrollShadow

scrollShadow?: boolean;

The shadow of the content when scrolling

interface CollapseProps

interface CollapseProps extends TransitionProps {}

property dimension

dimension?: DIMENSION | (() => DIMENSION);

The dimension used when collapsing

property getDimensionValue

getDimensionValue?: (dimension: DIMENSION, elem: Element) => number;

Function that returns the height or width of the animating DOM node

interface ColProps

interface ColProps extends WithAsProps {}

property lg

lg?: number;

The number of columns you wish to span for Large devices Desktops (≥ 992px)

property lgHidden

lgHidden?: boolean;

Hide column on Large devices Desktops

property lgOffset

lgOffset?: number;

Move columns to the right for Large devices Desktops

property lgPull

lgPull?: number;

Change the order of grid columns to the left for Large devices Desktops

property lgPush

lgPush?: number;

Change the order of grid columns to the right for Large devices Desktops

property md

md?: number;

The number of columns you wish to span for Medium devices Desktops (≥ 768px)

property mdHidden

mdHidden?: boolean;

Hide column on Medium devices Desktops

property mdOffset

mdOffset?: number;

Move columns to the right for Medium devices Desktops

property mdPull

mdPull?: number;

Change the order of grid columns to the left for Medium devices Desktops

property mdPush

mdPush?: number;

Change the order of grid columns to the right for Medium devices Desktops

property sm

sm?: number;

The number of columns you wish to span for Small devices Tablets (≥ 576px)

property smHidden

smHidden?: boolean;

Hide column on Small devices Tablets

property smOffset

smOffset?: number;

Move columns to the right for Small devices Tablets

property smPull

smPull?: number;

Change the order of grid columns to the left for Small devices Tablets

property smPush

smPush?: number;

Change the order of grid columns to the right for Small devices Tablets

property xl

xl?: number;

The number of columns you wish to span for Extra Large devices Desktops (≥ 1200px)

property xlHidden

xlHidden?: boolean;

Hide column on Extra large devices Desktops

property xlOffset

xlOffset?: number;

Move columns to the right for Extra large devices Desktops

property xlPull

xlPull?: number;

Change the order of grid columns to the left for Extra large devices Desktops

property xlPush

xlPush?: number;

Change the order of grid columns to the right for Extra large devices Desktops

property xs

xs?: number;

The number of columns you wish to span for Extra small devices Phones (< 576px)

property xsHidden

xsHidden?: boolean;

Hide column on Extra small devices Phones

property xsOffset

xsOffset?: number;

Move columns to the right for Extra small devices Phones

property xsPull

xsPull?: number;

Change the order of grid columns to the left for Extra small devices Phones

property xsPush

xsPush?: number;

Change the order of grid columns to the right for Extra small devices Phones

property xxl

xxl?: number;

The number of columns you wish to span for Ultra Large devices Desktops (≥ 1400px)

property xxlHidden

xxlHidden?: boolean;

Hide column on Ultra large devices Desktops

property xxlOffset

xxlOffset?: number;

Move columns to the right for Ultra large devices Desktops

property xxlPull

xxlPull?: number;

Change the order of grid columns to the left for Ultra large devices Desktops

property xxlPush

xxlPush?: number;

Change the order of grid columns to the right for Ultra large devices Desktops

interface CustomProviderProps

interface CustomProviderProps<T = Locale> extends Partial<CustomValue<T>> {}

property children

children?: React.ReactNode;

Primary content

property components

components?: Partial<ReactSuiteComponents>;

components allows setting default props for specific components globally. It accepts an object where each key represents a component name (e.g., 'Button', 'Input'), and the corresponding value is an object containing the defaultProps object. The defaultProps object defines the default props for that component. These props will be automatically applied to the component unless overridden by specific props passed in an individual component instance.
Example 1
components={{ Button: { defaultProps: { appearance: 'primary', size: 'lg' } }, Input: { defaultProps: { placeholder: 'Enter text', size: 'lg' } } }}

property csp

csp?: {
    /**
     * Content Security Policy nonce
     * https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/nonce
     */
    nonce?: string;
};

property disableInlineStyles

disableInlineStyles?: boolean;

Disable inline styles false

property iconClassPrefix

iconClassPrefix?: string;

The prefix of the icon CSS class

property theme

theme?: 'light' | 'dark' | 'high-contrast';

Supported themes

property toastContainer

toastContainer?: HTMLElement | (() => HTMLElement | null) | null;

Sets a container for toast rendering

interface DateInputProps

interface DateInputProps
    extends Omit<InputProps, 'value' | 'onChange' | 'defaultValue'>,
        FormControlBaseProps<Date | null> {}

property format

format?: string;

Format of the date when rendered in the input. Format of the string is based on Unicode Technical Standard.
See Also
- https://www.unicode.org/reports/tr35/tr35-dates.html#Date_Field_Symbol_Table 'yyyy-MM-dd'

property placeholder

placeholder?: string;

The placeholder prop defines the text displayed in a form control when the control has no value.

interface DatePickerProps

interface DatePickerProps
    extends PickerBaseProps<DatePickerLocale>,
        FormControlBaseProps<Date | null>,
        DeprecatedProps {}

property calendarDefaultDate

calendarDefaultDate?: Date;

Calendar panel default presentation date and time

property caretAs

caretAs?: React.ElementType | null;

Custom caret component

property disabled

disabled?: boolean;

Whether disabled the component

property editable

editable?: boolean;

Rendered as an input, the date can be entered via the keyboard

property format

format?: string;

Format date string

property hideHours

hideHours?: (hour: number, date: Date) => boolean;

Hide specific hour options

property hideMinutes

hideMinutes?: (minute: number, date: Date) => boolean;

Hide specific minute options

property hideSeconds

hideSeconds?: (second: number, date: Date) => boolean;

Hide specific second options

property isoWeek

isoWeek?: boolean;

ISO 8601 standard, each calendar week begins on Monday and Sunday on the seventh day
See Also
- https://en.wikipedia.org/wiki/ISO_week_date

property label

label?: React.ReactNode;

A label displayed at the beginning of toggle button

property limitEndYear

limitEndYear?: number;

Set the upper limit of the available year relative to the current selection date

property limitStartYear

limitStartYear?: number;

Set the lower limit of the available year relative to the current selection date

property loading

loading?: boolean;

Whether to display a loading state indicator

property monthDropdownProps

monthDropdownProps?: MonthDropdownProps;

The props for the Month Dropdown component.

property onChangeCalendarDate

onChangeCalendarDate?: (date: Date, event?: React.SyntheticEvent) => void;

Called when the calendar panel date changes

property onClean

onClean?: (event: React.MouseEvent) => void;

Called when clean

property oneTap

oneTap?: boolean;

One-click selection date

property onNextMonth

onNextMonth?: (date: Date) => void;

Called after the next month

property onOk

onOk?: (date: Date, event: React.SyntheticEvent) => void;

Called after clicking the OK button

property onPrevMonth

onPrevMonth?: (date: Date) => void;

Called after the prev month

property onSelect

onSelect?: (date: Date, event?: React.SyntheticEvent) => void;

Called when the option is selected

property onShortcutClick

onShortcutClick?: (range: RangeType<Date>, event: React.MouseEvent) => void;

Called after clicking the shortcut button

property onToggleMonthDropdown

onToggleMonthDropdown?: (toggle: boolean) => void;

Called when opening the month view

property onToggleTimeDropdown

onToggleTimeDropdown?: (toggle: boolean) => void;

Called when opening the time view

property plaintext

plaintext?: boolean;

Whether plaintext the component

property ranges

ranges?: RangeType<Date>[];

Predefined date Ranges

property readOnly

readOnly?: boolean;

Whether read only the component

property renderCell

renderCell?: (date: Date) => React.ReactNode;

Custom rendering calendar cell content.
5.54.0

property renderValue

renderValue?: (value: Date, format: string) => string;

Custom rendering of the selected date.

property shouldDisableDate

shouldDisableDate?: (date: Date) => boolean;

Whether a date on the calendar view should be disabled
Returns
date should be disabled (not selectable)

property shouldDisableHour

shouldDisableHour?: (hour: number, date: Date) => boolean;

Disabled hours on the time view

property shouldDisableMinute

shouldDisableMinute?: (minute: number, date: Date) => boolean;

Disabled minutes on the time view

property shouldDisableSecond

shouldDisableSecond?: (second: number, date: Date) => boolean;

Disabled seconds on the time view

property showMeridian

showMeridian?: boolean;

Deprecated
Use showMeridiem instead

property showMeridiem

showMeridiem?: boolean;

Meridiem format for 12-hour time

property showWeekNumbers

showWeekNumbers?: boolean;

Whether to show week numbers

property weekStart

weekStart?: 0 | 1 | 2 | 3 | 4 | 5 | 6;

The index of the first day of the week (0 - Sunday) If isoWeek is true, the value of weekStart is ignored.
0

interface DateRangeInputProps

interface DateRangeInputProps
    extends Omit<InputProps, 'value' | 'onChange' | 'defaultValue'>,
        FormControlBaseProps<ValueType> {}

property character

character?: string;

The character between the start and end dates. ' ~ '

property format

format?: string;

Format of the date when rendered in the input. Format of the string is based on Unicode Technical Standard.
See Also
- https://www.unicode.org/reports/tr35/tr35-dates.html#Date_Field_Symbol_Table 'yyyy-MM-dd'

property placeholder

placeholder?: string;

The placeholder prop defines the text displayed in a form control when the control has no value.

interface DateRangePickerProps

interface DateRangePickerProps
    extends PickerBaseProps<DateRangePickerLocale>,
        FormControlBaseProps<DateRange | null> {}

property calendarSnapping

calendarSnapping?: boolean;

If the user selects a date on the right calendar first, it will automatically switch to the left calendar. Always keep the date on the left calendar as the start date. false 5.69.0

property caretAs

caretAs?: React.ElementType | null;

Custom caret component

property character

character?: string;

The character that separates two dates ' ~ '

property defaultCalendarValue

defaultCalendarValue?: DateRange;

Set default date for calendar

property disabledDate

disabledDate?: DisabledDateFunction;

Disabled date
Deprecated
Use shouldDisableDate instead

property editable

editable?: boolean;

Rendered as an input, the date can be entered via the keyboard. true

property format

format?: string;

Format of the date displayed in the input box

property hideHours

hideHours?: (hour: number, date: Date) => boolean;

Hide specific hour options

property hideMinutes

hideMinutes?: (minute: number, date: Date) => boolean;

Hide specific minute options

property hideSeconds

hideSeconds?: (second: number, date: Date) => boolean;

Hide specific second options

property hoverRange

hoverRange?: 'week' | 'month' | ((date: Date) => DateRange);

The date range that will be selected when you click on the date

property isoWeek

isoWeek?: boolean;

ISO 8601 standard, each calendar week begins on Monday and Sunday on the seventh day
See Also
- https://en.wikipedia.org/wiki/ISO_week_date

property label

label?: React.ReactNode;

A label displayed at the beginning of toggle button

property limitEndYear

limitEndYear?: number;

Set the upper limit of the available year relative to the current selection date.
1000

property limitStartYear

limitStartYear?: number;

Set the lower limit of the available year relative to the current selection date

property loading

loading?: boolean;

Whether to display a loading state indicator

property monthDropdownProps

monthDropdownProps?: MonthDropdownProps;

The props for the Month Dropdown component.

property onClean

onClean?: (event: React.MouseEvent) => void;

Called when the value is cleared

property oneTap

oneTap?: boolean;

Whether to click once on selected date range，Can be used with hoverRange

property onOk

onOk?: (date: DateRange, event: React.SyntheticEvent) => void;

Called after clicking the OK button

property onSelect

onSelect?: (date: Date, event?: React.SyntheticEvent) => void;

Called when the option is selected

property onShortcutClick

onShortcutClick?: (range: RangeType, event: React.MouseEvent) => void;

Called after clicking the shortcut button

property ranges

ranges?: RangeType[];

Predefined date ranges

property renderCell

renderCell?: (date: Date) => React.ReactNode;

Custom rendering calendar cell content.
5.77.0

property renderTitle

renderTitle?: (date: Date) => React.ReactNode;

Custom render for calendar title

property renderValue

renderValue?: (value: DateRange, format: string) => string;

Custom rendering of the selected date range.

property shouldDisableDate

shouldDisableDate?: DisabledDateFunction;

Whether a date cell is disabled

property shouldDisableHour

shouldDisableHour?: (hour: number, date: Date) => boolean;

Disabled hours on the time view

property shouldDisableMinute

shouldDisableMinute?: (minute: number, date: Date) => boolean;

Disabled minutes on the time view

property shouldDisableSecond

shouldDisableSecond?: (second: number, date: Date) => boolean;

Disabled seconds on the time view

property showHeader

showHeader?: boolean;

Whether to display the formatted date range at the header of the calendar true 5.52.0

property showMeridian

showMeridian?: boolean;

Deprecated
Use showMeridiem instead

property showMeridiem

showMeridiem?: boolean;

Meridiem format for 12-hour time

property showOneCalendar

showOneCalendar?: boolean;

Show only one calendar select

property showWeekNumbers

showWeekNumbers?: boolean;

to show week numbers

property weekStart

weekStart?: 0 | 1 | 2 | 3 | 4 | 5 | 6;

The index of the first day of the week (0 - Sunday) If isoWeek is true, the value of weekStart is ignored.
0

interface DividerProps

interface DividerProps extends WithAsProps {}

property vertical

vertical?: boolean;

Vertical dividing line. Cannot be used with text.

interface DrawerProps

interface DrawerProps extends Omit<ModalProps, 'overflow'> {}

property closeButton

closeButton?: React.ReactNode | boolean;

Custom close button

property placement

placement?: TypeAttributes.Placement4;

The placement of Drawer

interface DropdownMenuItemProps

interface DropdownMenuItemProps<T = any>
    extends WithAsProps,
        Omit<React.HTMLAttributes<HTMLElement>, 'onSelect'> {}

property active

active?: boolean;

Active the current option

property as

as?: React.ElementType;

You can use a custom element for this component

property children

children?: React.ReactNode;

Primary content

property disabled

disabled?: boolean;

Disable the current option

property divider

divider?: boolean;

Whether to display the divider
Deprecated
Use dedicated <Dropdown.Separator> component instead

property eventKey

eventKey?: T;

The value of the current option

property icon

icon?: React.ReactElement<IconProps>;

Set the icon

property onSelect

onSelect?: (eventKey: T, event: React.SyntheticEvent) => void;

Select the callback function for the current option

property panel

panel?: boolean;

Displays a custom panel

property pullLeft

pullLeft?: boolean;

The sub-level menu appears from the right side by default, and when pullLeft is set, it appears from the left.
Deprecated
Submenus are now pointing the same direction.

property shortcut

shortcut?: React.ReactNode;

The dropdown item keyboard shortcut.
5.58.0

property submenu

submenu?: React.ReactElement;

The submenu that this menuitem controls (if exists)

interface DropdownMenuProps

interface DropdownMenuProps<T = string> extends StandardProps {}

property active

active?: boolean;

property activeKey

activeKey?: T;

property collapsible

collapsible?: boolean;

property disabled

disabled?: boolean;

property eventKey

eventKey?: T;

Only used for setting the default expand state when it's a submenu.

property expanded

expanded?: boolean;

property icon

icon?: React.ReactElement<IconProps>;

Set the icon

property onSelect

onSelect?: (eventKey: T | undefined, event: React.SyntheticEvent) => void;

property onToggle

onToggle?: (eventKey: T | undefined, event: React.SyntheticEvent) => void;

property open

open?: boolean;

property pullLeft

pullLeft?: boolean;

The submenu expands from the left and defaults to the right

property title

title?: React.ReactNode;

Define the title as a submenu

property trigger

trigger?: 'hover' | 'click';

interface DropdownProps

interface DropdownProps<T = any>
    extends WithAsProps,
        Omit<React.HTMLAttributes<HTMLElement>, 'onSelect' | 'title'> {}

property activeKey

activeKey?: T;

The option to activate the state, corresponding to the eventkey in the Dropdown.item

property defaultOpen

defaultOpen?: boolean;

Whether dropdown is initially open

property disabled

disabled?: boolean;

Whether or not component is disabled

property eventKey

eventKey?: T;

The value of the current option

property icon

icon?: React.ReactElement<IconProps>;

Set the icon

property menuStyle

menuStyle?: React.CSSProperties;

The style of the menu

property noCaret

noCaret?: boolean;

No caret variation

property onClose

onClose?: () => void;

The callback function that the menu closes

property onOpen

onOpen?: () => void;

Menu Pop-up callback function

property onSelect

onSelect?: (eventKey: T | undefined, event: React.SyntheticEvent) => void;

Selected callback function

property onToggle

onToggle?: (open?: boolean) => void;

Callback function for menu state switching

property open

open?: boolean;

Controlled open state

property placement

placement?: TypeAttributes.Placement8;

The placement of Menu

property renderTitle

renderTitle?: (children: React.ReactNode) => React.ReactNode;

Deprecated

property renderToggle

renderToggle?: (props: WithAsProps, ref: React.Ref<any>) => any;

Custom Toggle

property title

title?: React.ReactNode;

Define the title as a submenu

property toggleAs

toggleAs?: React.ElementType;

You can use a custom element type for this toggle component

property toggleClassName

toggleClassName?: string;

A css class to apply to the Toggle DOM node

property trigger

trigger?: DropdownTrigger | DropdownTrigger[];

Triggering events

interface FlexboxGridItemProps

interface FlexboxGridItemProps extends WithAsProps {}

property colspan

colspan?: number;

spacing between grids

property order

order?: number;

grid orders for sorting

interface FlexboxGridProps

interface FlexboxGridProps extends WithAsProps {}

property align

align?: 'top' | 'middle' | 'bottom';

align

property justify

justify?: 'start' | 'end' | 'center' | 'space-around' | 'space-between';

horizontal arrangement

interface FormControlLabelProps

interface FormControlLabelProps
    extends WithAsProps,
        React.LabelHTMLAttributes<HTMLLabelElement> {}

property htmlFor

htmlFor?: string;

Attribute of the html label tag, defaults to the controlId of the FormGroup

interface FormControlProps

interface FormControlProps<P = any, ValueType = any>
    extends WithAsProps,
        Omit<React.HTMLAttributes<HTMLFormElement>, 'value' | 'onChange'> {}

property accepter

accepter?: React.ElementType<P & FormControlBaseProps<ValueType>>;

Proxied components

property checkAsync

checkAsync?: boolean;

Asynchronous check value

property checkTrigger

checkTrigger?: TypeAttributes.CheckTrigger;

The data validation trigger type, and it wiill overrides the setting on

property disabled

disabled?: boolean;

Disable the form control.

property errorMessage

errorMessage?: React.ReactNode;

Show error messages

property errorPlacement

errorPlacement?: TypeAttributes.Placement8;

The placement of error messages

property name

name: string;

The name of form-control, support nested path. such as address.city. The path will be used to get and set form values.
Example 1
<Form formValue={{ address: { city: 'Shanghai' } }}> <FormControl name="address.city" /> </Form>

property plaintext

plaintext?: boolean;

Render the control as plain text

property readOnly

readOnly?: boolean;

Make the control readonly

property rule

rule?: CheckType<unknown, any>;

Validation rule

property shouldResetWithUnmount

shouldResetWithUnmount?: boolean;

Remove field value and error message when component is unmounted

property value

value?: ValueType;

Value

method onChange

onChange: (value: ValueType, event: React.SyntheticEvent) => void;

Callback fired when data changing

interface FormErrorMessageProps

interface FormErrorMessageProps extends WithAsProps {}

property placement

placement?: TypeAttributes.Placement8;

The placement of error messages

property show

show?: boolean;

Show error messages

interface FormGroupProps

interface FormGroupProps extends WithAsProps {}

property controlId

controlId?: string;

Sets id on <Form.Control> and htmlFor on <Form.ControlLabel>. And generate ʻaria-labelledby and ʻaria-describedby for <Form.Control>.

interface FormHelpTextProps

interface FormHelpTextProps
    extends WithAsProps,
        React.HTMLAttributes<HTMLSpanElement> {}

property tooltip

tooltip?: boolean;

Whether to show through the Tooltip component

interface FormInstance

interface FormInstance<
    T = Record<string, any>,
    M = string,
    E = {
        [P in keyof T]?: M;
    }
> extends FormImperativeMethods<T, M, E> {}

property root

root: HTMLFormElement | null;

Form root element

interface FormProps

interface FormProps<
    V = Record<string, any>,
    M = any,
    E = {
        [P in keyof V]?: M;
    }
> extends WithAsProps,
        Omit<
            FormHTMLAttributes<HTMLFormElement>,
            'onChange' | 'onSubmit' | 'onError' | 'onReset'
        > {}

property checkTrigger

checkTrigger?: TypeAttributes.CheckTrigger;

Trigger the type of form validation.
'change'

property disabled

disabled?: boolean;

Disable the form

property errorFromContext

errorFromContext?: boolean;

The error message comes from context

property fluid

fluid?: boolean;

The fluid property allows the Input 100% of the form to fill the container, valid only in vertical layouts.

property formDefaultValue

formDefaultValue?: V | null;

Initial value

property formError

formError?: E | null;

Error message of form

property formValue

formValue?: V | null;

Current value of the input. Creates a controlled component

property layout

layout?: 'horizontal' | 'vertical' | 'inline';

Set the left and right columns of the layout of the elements within the form。
'vertical'

property model

model?: Schema;

SchemaModel object
See Also
- https://github.com/rsuite/schema-typed

property nestedField

nestedField?: boolean;

The form data is nested. You may now nest fields with "dot syntax" (e.g. address.city).

false v5.51.0

Example 1

<Form formValue={{ address: { city: 'Shanghai' } }} nestedField>
 <FormControl name="address.city" />
</Form>

property onChange

onChange?: (formValue: V, event?: React.SyntheticEvent) => void;

Callback fired when data changing

property onCheck

onCheck?: (formError: E) => void;

Callback fired when data cheking

property onError

onError?: (formError: E) => void;

Callback fired when error checking

property onReset

onReset?: (
    formValue: V | null,
    event?: React.FormEvent<HTMLFormElement>
) => void;

Callback fired when form reset

property onSubmit

onSubmit?: (
    formValue: V | null,
    event?: React.FormEvent<HTMLFormElement>
) => void;

Callback fired when form submit，only when the form data is validated will trigger

property plaintext

plaintext?: boolean;

Render the form as plain text

property readOnly

readOnly?: boolean;

Make the form readonly

interface GridProps

interface GridProps extends WithAsProps {}

property fluid

fluid?: boolean;

Fluid layout

interface HeadingProps

interface HeadingProps extends WithAsProps {}

property level

level?: 1 | 2 | 3 | 4 | 5 | 6;

Sets heading level, h1 through h6. 3

interface HighlightProps

interface HighlightProps extends WithAsProps {}

property query

query?: string | string[];

property renderMark

renderMark?: (match: string, index: number) => React.ReactNode;

interface HStackProps

interface HStackProps extends Omit<StackProps, 'direction'> {}

property reverse

reverse?: boolean;

Reverse the order of the children in the stack

interface IconButtonProps

interface IconButtonProps extends ButtonProps {}

property circle

circle?: boolean;

Set circle button

property icon

icon?: React.ReactElement<IconProps>;

Set the icon

property placement

placement?: 'left' | 'right';

The placement of icon

interface ImageProps

interface ImageProps
    extends WithAsProps,
        Omit<React.ImgHTMLAttributes<HTMLImageElement>, 'placeholder'> {}

property bordered

bordered?: boolean;

An image may appear with border.

property circle

circle?: boolean;

An image may appear circular.

property fallbackSrc

fallbackSrc?: string;

The fallback image when the src fails to load.

property fit

fit?: CSSProperties['objectFit'];

It maps to css object-fit property.

property placeholder

placeholder?: React.ReactNode;

The placeholder to display when the image is loading.

property position

position?: CSSProperties['objectPosition'];

It maps to css object-position property.

property rounded

rounded?: boolean;

An image may appear rounded.

property shaded

shaded?: boolean;

Whether there is a shadow.

property zoomed

zoomed?: boolean;

Whether the image should be zoomed when hovered.

interface InlineEditProps

interface InlineEditProps extends Omit<WithAsProps, 'children'> {}

property children

children?:
    | ((props: ChildrenProps, ref: React.Ref<any>) => React.ReactElement)
    | React.ReactElement;

The render function of the InlineEdit.

property defaultValue

defaultValue?: any;

The initial value of the InlineEdit when it is not controlled.

property disabled

disabled?: boolean;

If true, the InlineEdit will be disabled.

property onCancel

onCancel?: (event?: React.SyntheticEvent) => void;

The callback function that is called when the InlineEdit is canceled.

property onChange

onChange?: (value: any, event: React.ChangeEvent) => void;

The callback function that is called when the value of the InlineEdit is changed.

property onEdit

onEdit?: (event: React.SyntheticEvent) => void;

The callback function that is called when the InlineEdit is clicked.

property onSave

onSave?: (event?: React.SyntheticEvent) => void;

The callback function that is called when the InlineEdit is saved.

property placeholder

placeholder?: string;

The placeholder of the InlineEdit.

property showControls

showControls?: boolean;

show the control buttons when editing. true

property size

size?: 'lg' | 'md' | 'sm' | 'xs';

The size of the InlineEdit.

property stateOnBlur

stateOnBlur?: 'save' | 'cancel';

The state of the InlineEdit when it is blurred.

property value

value?: any;

The value of the InlineEdit.

interface InputGroupProps

interface InputGroupProps extends WithAsProps {}

property children

children?: React.ReactNode;

Primary content

property disabled

disabled?: boolean;

An Input group can show that it is disabled

property inside

inside?: boolean;

Sets the composition content internally

property size

size?: TypeAttributes.Size;

A component can have different sizes

interface InputNumberProps

interface InputNumberProps<T = number | string | null>
    extends Omit<
            React.InputHTMLAttributes<HTMLInputElement>,
            'value' | 'defaultValue' | 'onChange' | 'size' | 'prefix'
        >,
        WithAsProps,
        FormControlBaseProps<T> {}

property buttonAppearance

buttonAppearance?: TypeAttributes.Appearance;

Button can have different appearances

property decimalSeparator

decimalSeparator?: string;

Decimal separator https://en.wikipedia.org/wiki/Decimal_separator
'.' 5.69.0

property disabled

disabled?: boolean;

An input can show that it is disabled

property formatter

formatter?: (value: number | string) => string;

Format the value of the input

property max

max?: number;

Maximum value

property min

min?: number;

Minimum value

property onWheel

onWheel?: (event: React.WheelEvent) => void;

Callback function when wheel event is triggered

property postfix

postfix?: React.ReactNode;

Sets the element displayed on the right side of the component

property prefix

prefix?: React.ReactNode;

Sets the element displayed to the left of the component

property scrollable

scrollable?: boolean;

Whether the value can be changed through the wheel event

property size

size?: TypeAttributes.Size;

An Input can have different sizes

property step

step?: number;

The value of each step. can be decimal

interface InputPickerProps

interface InputPickerProps<V = ValueType>
    extends FormControlPickerProps<V, InputPickerLocale, InputItemDataType>,
        Omit<SelectProps<V>, 'renderValue'>,
        Pick<PickerToggleProps, 'caretAs' | 'loading'> {}

property cacheData

cacheData?: InputItemDataType<V>[];

Option to cache value when searching asynchronously

property creatable

creatable?: boolean;

Settings can create new options

property onBlur

onBlur?: React.FocusEventHandler;

The onBlur attribute for the input element.

property onCreate

onCreate?: (value: V, item: ItemDataType, event: React.SyntheticEvent) => void;

Called when the option is created

property onFocus

onFocus?: React.FocusEventHandler;

The onFocus attribute for the input element.

property renderValue

renderValue?: (
    value: V,
    item: ItemDataType<V>,
    selectedElement: React.ReactNode
) => React.ReactNode;

property shouldDisplayCreateOption

shouldDisplayCreateOption?: (
    searchKeyword: string,
    filteredData: InputItemDataType<V>[]
) => boolean;

Customize whether to display "Create option" action with given textbox value
By default, InputPicker hides "Create option" action when textbox value matches any filtered item's [valueKey] property
Parameter searchKeyword
Value of the textbox
Parameter filteredData
The items filtered by the searchKeyword

property tabIndex

tabIndex?: number;

interface InputProps

interface InputProps
    extends WithAsProps,
        Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'size'>,
        Omit<FormControlBaseProps, 'onChange'> {}

property htmlSize

htmlSize?: number;

The htmlSize attribute defines the width of the element.
See Also
- MDN https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/size 5.49.0

property id

id?: string;

The HTML input id

property inputRef

inputRef?: React.Ref<any>;

Ref of input element

property onChange

onChange?: PrependParameters<
    React.ChangeEventHandler<HTMLInputElement>,
    [value: string]
>;

The callback function in which value is changed.

property onPressEnter

onPressEnter?: React.KeyboardEventHandler<HTMLInputElement>;

Called on press enter

property size

size?: TypeAttributes.Size;

A component can have different sizes

property type

type?: string;

The HTML input type

interface ListItemProps

interface ListItemProps extends WithAsProps, React.HTMLAttributes<HTMLElement> {}

property collection

collection?: Collection;

property disabled

disabled?: boolean;

property index

index?: number;

property size

size?: 'lg' | 'md' | 'sm' | 'xs';

interface ListProps

interface ListProps extends WithAsProps, SortConfig {}

property bordered

bordered?: boolean;

Whether the list is bordered.

property divider

divider?: boolean;

Whether to display a divider between items.
5.75.0

property hover

hover?: boolean;

Whether the list is hoverable.

property size

size?: 'lg' | 'md' | 'sm' | 'xs';

Size of list item.

property sortable

sortable?: boolean;

Whether the list is sortable.

interface LoaderProps

interface LoaderProps extends WithAsProps {}

property backdrop

backdrop?: boolean;

Whether the background is displayed

property center

center?: boolean;

Centered in the container

property content

content?: React.ReactNode;

Custom descriptive text

property inverse

inverse?: boolean;

An alternative dark visual style for the Loader

property size

size?: TypeAttributes.Size;

A loader can have different sizes

property speed

speed?: 'normal' | 'fast' | 'slow' | 'paused';

The speed at which the loader rotates

property vertical

vertical?: boolean;

The icon is displayed vertically with the text

interface MessageProps

interface MessageProps extends WithAsProps {}

property bordered

bordered?: boolean;

Show a border around the message box. 5.53.0

property centered

centered?: boolean;

Center the message vertically. 5.53.0

property closable

closable?: boolean;

Whether it is possible to close the message box

property duration

duration?: number;

Delay automatic removal of messages. When set to 0, the message is not automatically removed. (Unit: milliseconds)
2000
Deprecated
Use toaster.push(<Message />, { duration: 2000 }) instead.

property full

full?: boolean;

Fill the container

property header

header?: React.ReactNode;

The title of the message

property onClose

onClose?: (event?: React.MouseEvent<HTMLButtonElement>) => void;

Callback after the message is removed

property showIcon

showIcon?: boolean;

Whether to display an icon

property type

type?: TypeAttributes.Status;

The type of the message box.

interface ModalDialogProps

interface ModalDialogProps extends WithAsProps {}

property dialogClassName

dialogClassName?: string;

property dialogStyle

dialogStyle?: React.CSSProperties;

property size

size?: TypeAttributes.Size;

A modal can have different sizes

interface ModalHeaderProps

interface ModalHeaderProps extends WithAsProps {}

property children

children?: React.ReactNode;

Primary content

property closeButton

closeButton?: boolean;

Display close button

property onClose

onClose?: (event: React.MouseEvent) => void;

Called when Modal is hidden

interface ModalProps

interface ModalProps
    extends BaseModalProps,
        Pick<
            React.HTMLAttributes<HTMLElement>,
            'role' | 'id' | 'aria-labelledby' | 'aria-describedby'
        > {}

property animation

animation?: React.ElementType;

Set an animation effect for Modal, the default is Bounce.

property animationTimeout

animationTimeout?: number;

Set the duration of the animation

property closeButton

closeButton?: React.ReactNode | boolean;

Custom close button, used when rendered as a Drawer

property dialogAs

dialogAs?: React.ElementType;

You can use a custom element type for Dialog

property dialogClassName

dialogClassName?: string;

CSS class applied to Dialog DOM nodes

property dialogStyle

dialogStyle?: React.CSSProperties;

CSS style applied to dialog DOM nodes

property full

full?: boolean;

Full screen
Deprecated
Use size="full" instead.

property isDrawer

isDrawer?: boolean;

Indicates if the component should be displayed as a drawer

property overflow

overflow?: boolean;

Automatically sets the height when the body content is too long.

property size

size?: ModalSize;

A modal can have different sizes

interface MultiCascaderProps

interface MultiCascaderProps<T = any>
    extends FormControlPickerProps<T[], PickerLocale, ItemDataType<T>, T>,
        MultiCascadeTreeProps<T, T[], PickerLocale>,
        Pick<PickerToggleProps, 'label' | 'caretAs' | 'loading'> {}

property countable

countable?: boolean;

A picker that can be counted

property inline

inline?: boolean;

The panel is displayed directly when the component is initialized
See Also
- MultiCascadeTree https://rsuitejs.com/components/multi-cascade-tree
Deprecated
Use MultiCascadeTree instead

property menuClassName

menuClassName?: string;

Custom menu class name
Deprecated
Use popupClassName instead

property menuHeight

menuHeight?: number;

Sets the height of the menu
Deprecated
Use columnHeight instead

property menuStyle

menuStyle?: React.CSSProperties;

Custom menu style
Deprecated
Use popupStyle instead

property menuWidth

menuWidth?: number;

Sets the width of the menu.
Deprecated
Use columnWidth instead

property onClean

onClean?: (event: React.SyntheticEvent) => void;

Called when clean

property popupClassName

popupClassName?: string;

Custom popup style

property popupStyle

popupStyle?: React.CSSProperties;

Custom popup style

property renderMenu

renderMenu?: (
    items: readonly ItemDataType<T>[],
    menu: React.ReactNode,
    parentNode?: any,
    layer?: number
) => React.ReactNode;

Custom render menu
Deprecated
Use renderColumn instead

property renderMenuItem

renderMenuItem?: (
    node: React.ReactNode,
    item: ItemDataType<T>
) => React.ReactNode;

Custom render menu item
Deprecated
Use renderTreeNode instead

property renderValue

renderValue?: (
    value: T[],
    selectedItems: ItemDataType<T>[],
    selectedElement: React.ReactNode
) => React.ReactNode;

Custom render selected items

interface MultiCascadeTreeProps

interface MultiCascadeTreeProps<T = any, V = T[], L = any>
    extends WithAsProps,
        CascadeTreeProps<T, V> {}

property cascade

cascade?: boolean;

When set to true, selecting a child node will update the state of the parent node.

property disabledItemValues

disabledItemValues?: ToArray<NonNullable<T>>;

Disabled items

property locale

locale?: Partial<L>;

A collection of localized strings.

property onCheck

onCheck?: (
    value: T[],
    node: ItemDataType<T>,
    checked: boolean,
    event: React.SyntheticEvent
) => void;

Called after the checkbox state changes.

property uncheckableItemValues

uncheckableItemValues?: T[];

Set the option value for the check box not to be rendered

interface NavbarProps

interface NavbarProps extends WithAsProps {}

property appearance

appearance?: AppearanceType;

property classPrefix

classPrefix?: string;

interface NavItemProps

interface NavItemProps<T = string | number>
    extends WithAsProps,
        Omit<React.HTMLAttributes<HTMLElement>, 'onSelect'> {}

property active

active?: boolean;

Activation status

property disabled

disabled?: boolean;

Disabled status

property divider

divider?: boolean;

divier for nav item

property eventKey

eventKey?: T;

The value of the current option

property href

href?: string;

Providing a href will render an <a> element

property icon

icon?: React.ReactElement<IconProps>;

Sets the icon for the component

property onSelect

onSelect?: (eventKey: T | undefined, event: React.SyntheticEvent) => void;

Select the callback function that the event triggers.

property panel

panel?: boolean;

display panel

interface NavProps

interface NavProps<T = any>
    extends WithAsProps,
        Omit<React.HTMLAttributes<HTMLElement>, 'onSelect'> {}

property activeKey

activeKey?: T;

The active key of the Nav component.

property appearance

appearance?: 'default' | 'subtle' | 'tabs' | 'pills';

The appearance style of the Nav component.
'default' 'pills' is supported in version 5.68.0

property defaultActiveKey

defaultActiveKey?: T;

The default active key of the Nav component.

property justified

justified?: boolean;

Whether the Nav component is justified.

property onSelect

onSelect?: (eventKey: T | undefined, event: React.SyntheticEvent) => void;

Event handler for selecting a Nav item.

property pullRight

pullRight?: boolean;

Whether the Nav component is pulled to the right.

property reversed

reversed?: boolean;

Whether the Nav component is reversed.

property vertical

vertical?: boolean;

Whether the Nav component is vertical.

interface NotificationProps

interface NotificationProps extends WithAsProps {}

property closable

closable?: boolean;

The remove button is displayed.

header?: React.ReactNode;

Title of the message

property onClose

onClose?: (event?: React.MouseEvent<HTMLButtonElement>) => void;

Callback after the message is removed

property type

type?: TypeAttributes.Status;

Type of message

interface PaginationButtonProps

interface PaginationButtonProps<T = number | string>
    extends WithAsProps,
        Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onSelect'> {}

property active

active?: boolean;

A button can show it is currently the active user selection

property children

children?: React.ReactNode;

Primary content

property disabled

disabled?: boolean;

A button can show it is currently unable to be interacted with

property eventKey

eventKey: T;

The value of the current option

property onClick

onClick?: React.MouseEventHandler;

Called when the button is clicked.

property onSelect

onSelect?: (eventKey: T, event: React.MouseEvent) => void;

Select the callback function for the current option

interface PaginationProps

interface PaginationGroupProps extends PaginationProps {}

property layout

layout?: LayoutType[];

Customize the layout of a paging component. - total Component used to display the total. - pager Component used to display the page number. - limit Component used to display the number of rows per page. - skip Component used to jump to a page. - - Placeholder, take up the remaining space. - | Divider
['pager']

property limit

limit?: number;

Customize the layout of a paging component.

property limitOptions

limitOptions?: number[];

Customizes the options of the rows per page select field.

property onChangeLimit

onChangeLimit?: (limit: number) => void;

Callback fired when the number of rows per page is changed.

property onChangePage

onChangePage?: (page: number) => void;

Callback fired when the page is changed.

property total

total: number;

Total number of data entries.

interface PanelGroupProps

interface PanelGroupProps<T = KeyType> extends WithAsProps {}

property accordion

accordion?: boolean;

Whether it is a collapsible panel.

property activeKey

activeKey?: T;

Expand the Panel, corresponding to the 'Panel' of 'eventkey'

property bordered

bordered?: boolean;

Show border

property children

children?: React.ReactNode;

Primary content

property defaultActiveKey

defaultActiveKey?: T;

The default expansion panel.

property onSelect

onSelect?: (eventKey: T | undefined, event: React.SyntheticEvent) => void;

Toggles the callback function for the expand panel

interface PanelProps

interface PanelProps<T = string | number> extends WithAsProps, AnimationEventProps {}

property bodyFill

bodyFill?: boolean;

Content area filled with containers

property bodyProps

bodyProps?: React.HTMLAttributes<HTMLDivElement>;

Custom body style

property bordered

bordered?: boolean;

Show border

property caretAs

caretAs?: React.ElementType;

The icon on the right side of the title

property collapsible

collapsible?: boolean;

Whether it is a collapsible panel

property defaultExpanded

defaultExpanded?: boolean;

Expand then panel by default

property disabled

disabled?: boolean;

Whether the panel is disabled

property eventKey

eventKey?: T;

The event key corresponding to the panel

property expanded

expanded?: boolean;

Expand then panel

header?: React.ReactNode;

The head displays information

property headerRole

headerRole?: string;

The role attribute of the header

property id

id?: string;

The id attribute of the panel

property onSelect

onSelect?: (eventKey: T | undefined, event: React.SyntheticEvent) => void;

Called when the panel is selected

property panelRole

panelRole?: string;

The role attribute of the panel

property scrollShadow

scrollShadow?: boolean;

The shadow of the content when scrolling

property shaded

shaded?: boolean;

Whether there is a shadow

interface PickerHandle

interface PickerHandle {}

property close

close?: () => void;

property list

list?: ListHandle;

property open

open?: () => void;

property overlay

overlay?: HTMLElement | null;

property root

root: HTMLElement | null;

property target

target?: HTMLElement | null;

property type

type?: typeof RSUITE_PICKER_TYPE;

property updatePosition

updatePosition?: () => void;

interface Placeholder

interface Placeholder
    extends RsRefForwardingComponent<'div', PlaceholderParagraphProps> {}

property Graph

Graph: typeof PlaceholderGraph;

property Grid

Grid: typeof PlaceholderGrid;

property Paragraph

Paragraph: typeof PlaceholderParagraph;

interface PlaceholderGraphProps

interface PlaceholderGraphProps extends WithAsProps {}

property active

active?: boolean;

Placeholder status, display the loading state.

property height

height?: number;

The height of the graph.
200

property width

width?: number;

The width of the graph.
100%

interface PlaceholderGridProps

interface PlaceholderGridProps extends WithAsProps {}

property active

active?: boolean;

Placeholder status, display the loading state.

property columns

columns?: number;

The number of columns. 5

property rowHeight

rowHeight?: number;

The height of the row.
10

property rowMargin

rowMargin?: number;

Deprecated
Use rowSpacing instead.

property rows

rows?: number;

The number of rows.
5

property rowSpacing

rowSpacing?: number;

The spacing between rows.
20 5.59.1

interface PlaceholderParagraphProps

interface PlaceholderParagraphProps extends WithAsProps {}

property active

active?: boolean;

Placeholder status, display the loading state.

property graph

graph?: boolean | 'circle' | 'square' | 'image';

The shape of the graph. false

property rowHeight

rowHeight?: number;

The height of the row. 10

property rowMargin

rowMargin?: number;

Deprecated
Use rowSpacing instead.

property rows

rows?: number;

The number of rows. 2

property rowSpacing

rowSpacing?: number;

The spacing between rows. 20 5.59.1

interface PopoverProps

interface PopoverProps extends WithAsProps {}

property arrow

arrow?: boolean;

Whether show the arrow indicator

property full

full?: boolean;

The content full the container

property title

title?: React.ReactNode;

The title of the component.

property visible

visible?: boolean;

The component is visible by default.

interface Progress

interface Progress extends RsRefForwardingComponent<'div', ProgressLineProps> {}

property Circle

Circle: typeof ProgressCircle;

property Line

Line: typeof ProgressLine;

interface ProgressCircleProps

interface ProgressCircleProps extends WithAsProps {}

property gapDegree

gapDegree?: number;

Circular progress bar degree

property gapPosition

gapPosition?: 'top' | 'bottom' | 'left' | 'right';

Circular progress bar Notch position

property percent

percent?: number;

Percent of progress

property showInfo

showInfo?: boolean;

Show text

property status

status?: 'success' | 'fail' | 'active';

Progress status

property strokeColor

strokeColor?: string;

Line color

property strokeLinecap

strokeLinecap?: 'butt' | 'round' | 'square';

The end of different types of open paths

property strokeWidth

strokeWidth?: number;

Line width

property trailColor

trailColor?: string;

Tail color

property trailWidth

trailWidth?: number;

Tail width

interface ProgressLineProps

interface ProgressLineProps extends WithAsProps {}

property percent

percent?: number;

Percent of progress

property showInfo

showInfo?: boolean;

Show text

property status

status?: 'success' | 'fail' | 'active';

Progress status

property strokeColor

strokeColor?: string;

Line color

property strokeWidth

strokeWidth?: number;

Line width

property trailColor

trailColor?: string;

Trail color

property trailWidth

trailWidth?: number;

Trail width

property vertical

vertical?: boolean;

The progress bar is displayed vertically

interface RadioGroupProps

interface RadioGroupProps<T = ValueType>
    extends WithAsProps,
        FormControlBaseProps<T> {}

property appearance

appearance?: 'default' | 'picker';

A radio group can have different appearances

property children

children?: React.ReactNode;

Primary content

property inline

inline?: boolean;

Inline layout

property name

name?: string;

Name to use for form

interface RadioProps

interface RadioProps<T = ValueType>
    extends WithAsProps,
        Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {}

property checked

checked?: boolean;

Specifies whether the radio is selected

property color

color?: TypeAttributes.Color;

The color of the radio when checked
5.56.0

property defaultChecked

defaultChecked?: boolean;

Specifies the initial state: whether or not the radio is selected

property disabled

disabled?: boolean;

The disable of component

property inline

inline?: boolean;

Inline layout.
Used in RadioGroup

property inputProps

inputProps?: React.HTMLAttributes<HTMLInputElement>;

Attributes applied to the input element

property inputRef

inputRef?: React.Ref<HTMLInputElement>;

Pass a ref to the input element

property name

name?: string;

Name to use for form

property onChange

onChange?: (
    value: T | undefined,
    checked: boolean,
    event: React.ChangeEvent<HTMLInputElement>
) => void;

Callback function with value changed

property plaintext

plaintext?: boolean;

Render the control as plain text

property readOnly

readOnly?: boolean;

Make the control readonly

property value

value?: T;

Value, corresponding to the value of the Radiogroup, to determine whether the

interface RadioTileGroupProps

interface RadioTileGroupProps<T = ValueType>
    extends WithAsProps,
        FormControlBaseProps<T> {}

property children

children?: React.ReactNode;

Primary content

property disabled

disabled?: boolean;

Whether radio is disabled

property inline

inline?: boolean;

Inline layout

property name

name?: string;

Name to use for form

interface RadioTileProps

interface RadioTileProps<T = ValueType>
    extends WithAsProps,
        Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {}

property checked

checked?: boolean;

Specifies whether the radio is selected

property children

children?: React.ReactNode;

Additional description, if needed

property defaultChecked

defaultChecked?: boolean;

Specifies the initial state: whether or not the radio is selected

property disabled

disabled?: boolean;

Whether the Radio is disabled

property icon

icon?: React.ReactNode;

Icon to be used

property label

label?: React.ReactNode;

Label of the Radio tile

property name

name?: string;

Name to use for form

property onChange

onChange?: (value?: T, event?: React.ChangeEvent<HTMLInputElement>) => void;

Callback function with value changed

property value

value?: T;

Value, corresponding to the value of the RadioTileGroup, to determine whether the

interface RateProps

interface RateProps<T = number> extends WithAsProps, FormControlBaseProps<T> {}

property allowHalf

allowHalf?: boolean;

property character

character?: React.ReactNode;

property classPrefix

classPrefix?: string;

property cleanable

cleanable?: boolean;

property color

color?: TypeAttributes.Color;

A tate can have different colors

property max

max?: number;

property onChangeActive

onChangeActive?: (value: T, event: React.SyntheticEvent) => void;

property renderCharacter

renderCharacter?: (value: number, index: number) => React.ReactNode;

property size

size?: TypeAttributes.Size;

A tate can have different sizes

property vertical

vertical?: boolean;

interface RowProps

interface RowProps extends WithAsProps {}

property gutter

gutter?: number;

interface SafeAnchorProps

interface SafeAnchorProps extends WithAsProps, React.HTMLAttributes<HTMLElement> {}

property disabled

disabled?: boolean;

A link can show it is currently unable to be interacted with

property href

href?: string;

Link specified url

interface SelectPickerProps

interface SelectPickerProps<T = any>
    extends Omit<
            FormControlPickerProps<T, PickerLocale, ItemDataType<T>>,
            'value' | 'defaultValue' | 'onChange'
        >,
        SelectProps<T>,
        Pick<PickerToggleProps, 'caretAs' | 'label' | 'loading'> {}

property defaultValue

defaultValue?: T;

Initial value

property onChange

onChange?: (value: T | null, event: React.SyntheticEvent) => void;

Called after the value has been changed

property value

value?: T | null;

Current value of the component. Creates a controlled component

interface SidebarProps

interface SidebarProps extends WithAsProps {}

property collapsible

collapsible?: boolean;

Sidebar can be collapsed

property width

width?: number | string;

Width

interface SidenavProps

interface SidenavProps<T = string | number> extends WithAsProps {}

property activeKey

activeKey?: T;

Activation option, corresponding menu eventkey
Deprecated
Use <Nav activeKey> instead

property appearance

appearance?: 'default' | 'inverse' | 'subtle';

Menu style

property defaultOpenKeys

defaultOpenKeys?: T[];

Open menu, corresponding to Dropdown eventkey

property expanded

expanded?: boolean;

Whether to expand the Sidenav

property onOpenChange

onOpenChange?: (openKeys: T[], event: React.SyntheticEvent) => void;

Menu opening callback function that changed

property onSelect

onSelect?: (eventKey: T | undefined, event: React.SyntheticEvent) => void;

Select the callback function for the menu
Deprecated
Use <Nav onSelect> instead

property openKeys

openKeys?: T[];

Open menu, corresponding to Dropdown eventkey (controlled)

interface SidenavToggleProps

interface SidenavToggleProps extends WithAsProps {}

property expanded

expanded?: boolean;

Expand then nav
Deprecated
Use <Sidenav expanded> instead.

property onToggle

onToggle?: (expanded: boolean, event: React.MouseEvent) => void;

Callback function for menu state switching

interface SlideProps

interface SlideProps extends TransitionProps {}

property placement

placement?: 'top' | 'right' | 'bottom' | 'left';

interface SliderProps

interface SliderProps<T = number> extends WithAsProps, FormControlBaseProps<T> {}

property 'aria-label'

'aria-label'?: string;

The label of the slider.

property 'aria-labelledby'

'aria-labelledby'?: string;

The id of the element containing a label for the slider.

property 'aria-valuetext'

'aria-valuetext'?: string;

A string value that provides a user-friendly name for the current value of the slider.

property barClassName

barClassName?: string;

A css class to apply to the Bar DOM node

property getAriaValueText

getAriaValueText?: (value: number, eventKey?: 'start' | 'end') => string;

Accepts a function which returns a string value that provides a user-friendly name for the current value of the slider.

property graduated

graduated?: boolean;

Show Ticks

property handleClassName

handleClassName?: string;

A css class to apply to the Handle node.

property handleStyle

handleStyle?: React.CSSProperties;

custom style

property handleTitle

handleTitle?: React.ReactNode;

Customizing what is displayed inside a handle

property keepTooltipOpen

keepTooltipOpen?: boolean;

If true, tooltip will always be visible even without hover

property max

max?: number;

Maximum sliding range

property min

min?: number;

Minimum value of sliding range

property onChangeCommitted

onChangeCommitted?: (value: T, event: React.MouseEvent) => void;

Callback function that is fired when the mouseup is triggered.

property placeholder

placeholder?: React.ReactNode;

Placeholder text

property progress

progress?: boolean;

Show sliding progress bar

property renderMark

renderMark?: (mark: number) => React.ReactNode;

Customize labels on the render ruler

property renderTooltip

renderTooltip?: (value: number | undefined) => React.ReactNode;

Customize the content of the rendered Tooltip.

property step

step?: number;

Slide the value of one step

property tooltip

tooltip?: boolean;

Whether to show Tooltip when sliding

property vertical

vertical?: boolean;

Vertical Slide

interface StackProps

interface StackProps extends WithAsProps {}

property alignItems

alignItems?: 'flex-start' | 'center' | 'flex-end' | 'stretch' | 'baseline';

Define the alignment of the children in the stack on the cross axis

property childrenRenderMode

childrenRenderMode?: 'clone' | 'wrap';

The render mode of the children.

property direction

direction?: 'row' | 'row-reverse' | 'column' | 'column-reverse';

The direction of the children in the stack.

property divider

divider?: React.ReactNode;

Add an element between each child

property justifyContent

justifyContent?:
    | 'flex-start'
    | 'center'
    | 'flex-end'
    | 'space-between'
    | 'space-around';

Define the alignment of the children in the stack on the inline axis

property spacing

spacing?: number | string | (number | string)[];

Define the spacing between immediate children

property wrap

wrap?: boolean;

Define whether the children in the stack are forced onto one line or can wrap onto multiple lines

interface StatGroupProps

interface StatGroupProps extends WithAsProps {}

property columns

columns?: number;

The number of columns in the group

property spacing

spacing?: number | string;

Spacing between columns

interface StatProps

interface StatProps extends WithAsProps {}

property bordered

bordered?: boolean;

Add a border to the component.

property icon

icon?: React.ReactNode;

The icon displayed on the left side of the component.

interface StepItemProps

interface StepItemProps extends WithAsProps {}

property description

description?: React.ReactNode;

The description of Steps item

property icon

icon?: React.ReactElement<IconProps>;

Set icon

property itemWidth

itemWidth?: number | string;

The width of each item.

property status

status?: 'finish' | 'wait' | 'process' | 'error';

Step status

property stepNumber

stepNumber?: number;

Number of Step

property title

title?: React.ReactNode;

The title of Steps item

interface StepsProps

interface StepsProps extends WithAsProps {}

property children

children?: React.ReactNode;

Primary content

property current

current?: number;

Current execution step

property currentStatus

currentStatus?: 'finish' | 'wait' | 'process' | 'error';

Current execution step status

property small

small?: boolean;

Small size Step Bar

property vertical

vertical?: boolean;

Vertical display

interface TabsProps

interface TabsProps extends WithAsProps {}

Props for the Tabs component.

property activeKey

activeKey?: string | number;

The key of the active tab.

property appearance

appearance?: 'tabs' | 'subtle' | 'pills';

The appearance of the tabs. 'tabs' 'pills' is supported in version 5.68.0

property defaultActiveKey

defaultActiveKey?: string | number;

The default key of the active tab.

property id

id?: string;

The ID of the tabs. A unique ID is automatically generated.

property onSelect

onSelect?: (
    eventKey: string | number | undefined,
    event: React.SyntheticEvent
) => void;

Callback function that is called when a tab is selected.
Parameter eventKey
The key of the selected tab.
Parameter event
The event object.

property reversed

reversed?: boolean;

Whether to reverse the order of the tabs.

property vertical

vertical?: boolean;

Whether to display the tabs vertically.

interface TagPickerProps

interface TagPickerProps<V = any>
    extends Omit<InputPickerProps<V>, 'renderValue'>,
        Partial<TagOnlyProps> {}

property renderMenuItemCheckbox

renderMenuItemCheckbox?: (checkboxProps: CheckboxProps) => React.ReactNode;

Custom render checkbox on menu item 5.47.0

property renderValue

renderValue?: (
    values: V[],
    items: ItemDataType<V>[],
    selectedElement: React.ReactNode
) => React.ReactNode;

Custom render selected items

interface TagProps

interface TagProps extends WithAsProps {}

property children

children?: React.ReactNode;

The content of the component

property closable

closable?: boolean;

Whether to close

property color

color?: TypeAttributes.Color;

A tag can have different colors

property locale

locale?: CommonLocale;

Custom locale

property onClose

onClose?: (event: React.MouseEvent<HTMLElement>) => void;

Click the callback function for the Close button

property size

size?: 'lg' | 'md' | 'sm';

Different sizes

interface TextProps

interface TextProps extends WithAsProps {}

property align

align?: 'left' | 'center' | 'right' | 'justify';

To set the text alignment of the element

property color

color?: TypeAttributes.Color;

The font color of the text.

property maxLines

maxLines?: number;

The number of lines to limit the provided text to. Text will be truncated with an ellipsis.

property muted

muted?: boolean;

To set the text to be muted.

property size

size?: keyof typeof fontSizeMap | number | string;

The font size of the text.

property transform

transform?: 'uppercase' | 'lowercase' | 'capitalize';

To set the text transformation of the element.

property weight

weight?:
    | 'thin'
    | 'light'
    | 'regular'
    | 'medium'
    | 'semibold'
    | 'bold'
    | 'extrabold';

The font weight of the text. 'regular'

interface TimelineItemProps

interface TimelineItemProps extends WithAsProps {}

property as

as?: React.ElementType;

You can use a custom element type for this component

property children

children?: React.ReactNode;

The content of the component

property dot

dot?: React.ReactNode;

Customizing the Timeline item

property time

time?: React.ReactNode;

Customized time of timeline *

interface TimelineProps

interface TimelineProps extends WithAsProps {}

property align

align?: 'left' | 'right' | 'alternate';

TimeLine content relative position *

property children

children?: React.ReactNode;

The content of the component

property endless

endless?: boolean;

Timeline endless *

property isItemActive

isItemActive?: (index: number, totalItemsCount: number) => boolean;

Whether an item is active (with highlighted dot).
The last item is marked active.

interface TimePickerProps

interface TimePickerProps
    extends PickerBaseProps<DatePickerLocale>,
        FormControlBaseProps<Date | null> {}

property calendarDefaultDate

calendarDefaultDate?: Date;

Calendar panel default presentation date and time

property caretAs

caretAs?: React.ElementType | null;

Custom caret component

property disabled

disabled?: boolean;

Whether disabled the component

property editable

editable?: boolean;

Rendered as an input, the date can be entered via the keyboard

property format

format?: string;

Format date string

property hideHours

hideHours?: (hour: number, date: Date) => boolean;

Hide specific hour options

property hideMinutes

hideMinutes?: (minute: number, date: Date) => boolean;

Hide specific minute options

property hideSeconds

hideSeconds?: (second: number, date: Date) => boolean;

Hide specific second options

property label

label?: React.ReactNode;

A label displayed at the beginning of toggle button

property loading

loading?: boolean;

Whether to display a loading state indicator

property onClean

onClean?: (event: React.MouseEvent) => void;

Called when clean

property onOk

onOk?: (date: Date, event: React.SyntheticEvent) => void;

Called after clicking the OK button

property onSelect

onSelect?: (date: Date, event?: React.SyntheticEvent) => void;

Called when the option is selected

property onShortcutClick

onShortcutClick?: (range: RangeType<Date>, event: React.MouseEvent) => void;

Called after clicking the shortcut button

property plaintext

plaintext?: boolean;

Whether plaintext the component

property readOnly

readOnly?: boolean;

Whether read only the component

property renderValue

renderValue?: (value: Date, format: string) => string;

Custom rendering of the selected date.

property showMeridiem

showMeridiem?: boolean;

Meridiem format for 12-hour time

interface TimeRangePickerProps

interface TimeRangePickerProps
    extends PickerBaseProps<DatePickerLocale>,
        FormControlBaseProps<DateRange | null> {}

property caretAs

caretAs?: React.ElementType | null;

Custom caret component

property character

character?: string;

The character that separates two dates ' ~ '

property editable

editable?: boolean;

Rendered as an input, the date can be entered via the keyboard. true

property format

format?: string;

Format of the date displayed in the input box

property hideHours

hideHours?: (hour: number, date: Date) => boolean;

Hide specific hour options

property hideMinutes

hideMinutes?: (minute: number, date: Date) => boolean;

Hide specific minute options

property hideSeconds

hideSeconds?: (second: number, date: Date) => boolean;

Hide specific second options

property label

label?: React.ReactNode;

A label displayed at the beginning of toggle button

property loading

loading?: boolean;

Whether to display a loading state indicator

property onClean

onClean?: (event: React.MouseEvent) => void;

Called when the value is cleared

property onOk

onOk?: (date: DateRange, event: React.SyntheticEvent) => void;

Called after clicking the OK button

property onShortcutClick

onShortcutClick?: (range: RangeType, event: React.MouseEvent) => void;

Called after clicking the shortcut button

property ranges

ranges?: RangeType[];

Predefined date ranges

property renderTitle

renderTitle?: (date: Date) => React.ReactNode;

Custom render for calendar title

property renderValue

renderValue?: (value: DateRange, format: string) => string;

Custom rendering of the selected date range.

property showHeader

showHeader?: boolean;

Whether to display the formatted date range at the header of the calendar

property showMeridiem

showMeridiem?: boolean;

Meridiem format for 12-hour time

interface Toaster

interface Toaster {}

method clear

clear: () => void;

Clear all toast messages.

method push

push: (
    message: React.ReactNode,
    options?: ToastContainerProps
) => string | undefined | Promise<string | undefined>;

Push a toast message.
Parameter message
The message to be displayed. eg: <Message type="success" description="Success" /> or <Notification type="success" closable>Success</Notification>
Parameter options
The options of the toast message. (optional) eg: { placement: 'topCenter', duration: 5000 }
Returns
The key of the toast message.

method remove

remove: (key: string) => void;

Remove a toast message.
Parameter key
The key of the toast message.

interface ToggleProps

interface ToggleProps
    extends WithAsProps,
        Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'onChange'> {}

property checked

checked?: boolean;

Whether the toggle is checked （Controlled)

property checkedChildren

checkedChildren?: React.ReactNode;

Checked display content

property color

color?: TypeAttributes.Color;

The color of the toggle.

property defaultChecked

defaultChecked?: boolean;

Whether the toggle is checked (Uncontrolled)

property disabled

disabled?: boolean;

Whether to disabled toggle

property loading

loading?: boolean;

Whether the checked state is being updated

property locale

locale?: ToggleLocale;

Custom locale

property onChange

onChange?: (
    checked: boolean,
    event: React.ChangeEvent<HTMLInputElement>
) => void;

Called when the state of the toggle changes

property plaintext

plaintext?: boolean;

Render the control as plain text

property readOnly

readOnly?: boolean;

Make the control readonly

property size

size?: Omit<TypeAttributes.Size, 'xs'>;

The size of the toggle

property unCheckedChildren

unCheckedChildren?: React.ReactNode;

Unchecked display content

interface TooltipProps

interface TooltipProps extends WithAsProps {}

property arrow

arrow?: boolean;

Whether show the arrow indicator

property children

children?: React.ReactNode;

Primary content

property placement

placement?: TypeAttributes.Placement;

Dispaly placement

property visible

visible?: boolean;

Whether visible

interface TransitionProps

interface TransitionProps extends AnimationEventProps {}

property animation

animation?: boolean;

property children

children?:
    | ((props: any, ref: React.Ref<any>) => React.ReactNode)
    | React.ReactNode;

Primary content

property className

className?: string;

Additional classes

property enteredClassName

enteredClassName?: string;

CSS class or classes applied when the component is entered

property enteringClassName

enteringClassName?: string;

CSS class or classes applied while the component is entering

property exitedClassName

exitedClassName?: string;

CSS class or classes applied when the component is exited

property exitingClassName

exitingClassName?: string;

CSS class or classes applied while the component is exiting

property in

in?: boolean;

Show the component; triggers the enter or exit animation

property timeout

timeout?: number;

A Timeout for the animation

property transitionAppear

transitionAppear?: boolean;

Run the enter animation when the component mounts, if it is initially shown

property unmountOnExit

unmountOnExit?: boolean;

Unmount the component (remove it from the DOM) when it is not shown

interface TreePickerProps

interface TreePickerProps<V = number | string | null>
    extends TreeViewProps<V>,
        TreeExtraProps,
        DeprecatedPickerProps,
        FormControlPickerProps<V, PickerLocale, TreeNode>,
        Pick<PickerToggleProps, 'caretAs' | 'loading'> {}

property popupAutoWidth

popupAutoWidth?: boolean;

Popup auto width
true

property popupClassName

popupClassName?: string;

Custom popup style

property popupStyle

popupStyle?: React.CSSProperties;

Custom popup style

property renderValue

renderValue?: (
    value: V,
    selectedNode: TreeNode,
    selectedElement: React.ReactNode
) => React.ReactNode;

Custom render selected items

property treeHeight

treeHeight?: number;

The height of the tree

interface TreeProps

interface TreeProps<T = string | number | null>
    extends TreeViewProps<T>,
        TreeExtraProps {}

property defaultValue

defaultValue?: T;

Default selected Value

property scrollShadow

scrollShadow?: boolean;

The shadow of the content when scrolling

interface UploaderProps

interface UploaderProps
    extends WithAsProps,
        Omit<UploadTriggerProps, 'onChange' | 'onError' | 'onProgress'> {}

property accept

accept?: string;

File types that can be accepted. See input accept Attribute

property action

action: string;

Uploading URL

property autoUpload

autoUpload?: boolean;

Automatically upload files after selecting them

property children

children?: React.ReactElement;

Primary content

property data

data?: any;

Upload the parameters with

property defaultFileList

defaultFileList?: FileType[];

List of uploaded files

property disabled

disabled?: boolean;

Disabled upload button

property disabledFileItem

disabledFileItem?: boolean;

Disabled file item

property disableMultipart

disableMultipart?: boolean;

If 'true', disable using a multipart form for file upload and instead stream the file. Some APIs (e.g. Amazon S3) may expect the file to be streamed rather than sent via a form. Defaults to false.

property draggable

draggable?: boolean;

Supported Drag and drop upload *

property fileList

fileList?: FileType[];

List of uploaded files （Controlled）

property fileListVisible

fileListVisible?: boolean;

File list can be rendered

property headers

headers?: any;

Set Upload request Header

property listType

listType?: 'text' | 'picture-text' | 'picture';

Upload list Style

property locale

locale?: UploaderLocale;

Custom locale

property maxPreviewFileSize

maxPreviewFileSize?: number;

Max file size limit of the preview file

property method

method?: string;

The http method of upload request

property multiple

multiple?: boolean;

Allow multiple file uploads

property name

name?: string;

Upload the parameter name of the corresponding file

property onChange

onChange?: (
    fileList: FileType[],
    event: React.ChangeEvent | React.MouseEvent
) => void;

callback function that the upload queue has changed

property onError

onError?: (
    status: ErrorStatus,
    file: FileType,
    event: ProgressEvent,
    xhr: XMLHttpRequest
) => void;

Upload callback function with error

property onPreview

onPreview?: (file: FileType, event: React.SyntheticEvent) => void;

In the file list, click the callback function for the uploaded file

property onProgress

onProgress?: (
    percent: number,
    file: FileType,
    event: ProgressEvent,
    xhr: XMLHttpRequest
) => void;

Callback functions that upload progress change

property onRemove

onRemove?: (file: FileType) => void;

In the file list, click the callback function to delete a file

property onReupload

onReupload?: (file: FileType) => void;

In the file list, for uploading failed files, click the callback function to upload

property onSuccess

onSuccess?: (
    response: any,
    file: FileType,
    event: ProgressEvent,
    xhr: XMLHttpRequest
) => void;

callback function after successful upload

property onUpload

onUpload?: (file: FileType, uploadData: any, xhr: XMLHttpRequest) => void;

The callback function that starts the upload file

property plaintext

plaintext?: boolean;

Render the control as plain text

property readOnly

readOnly?: boolean;

Make the control readonly

property removable

removable?: boolean;

Removable list file

property renderFileInfo

renderFileInfo?: (
    file: FileType,
    fileElement: React.ReactNode
) => React.ReactNode;

Custom render file information

property renderThumbnail

renderThumbnail?: (
    file: FileType,
    thumbnail: React.ReactNode
) => React.ReactNode;

Custom render thumbnail

property shouldQueueUpdate

shouldQueueUpdate?: (
    fileList: FileType[],
    newFile: FileType[] | FileType
) => boolean | Promise<boolean>;

Allow the queue to be updated. After you select a file, update the checksum function before the upload file queue, and return false to not update

property shouldUpload

shouldUpload?: (file: FileType) => boolean | Promise<boolean>;

Allow uploading of files. Check function before file upload, return false without uploading

property timeout

timeout?: number;

Set upload timeout

property toggleAs

toggleAs?: React.ElementType;

You can use a custom element for this component

property withCredentials

withCredentials?: boolean;

Whether to carry cookies when uploading requests

interface VStackProps

interface VStackProps extends Omit<StackProps, 'direction'> {}

property reverse

reverse?: boolean;

Type Aliases

type AccordionProps

type AccordionProps = Omit<PanelGroupProps, 'accordion'>;

type BounceProps

type BounceProps = TransitionProps;

type BreadcrumbLocale

type BreadcrumbLocale = PickKeys<typeof defaultLocale.Breadcrumb>;

type ContainerProps

type ContainerProps = WithAsProps & React.HTMLAttributes<HTMLDivElement>;

type ContentProps

type ContentProps = ComponentProps;

type DatePickerLocale

type DatePickerLocale = PickKeys<typeof defaultLocale.DatePicker> & CommonLocale;

type DateRangePickerLocale

type DateRangePickerLocale = PickKeys<typeof defaultLocale.DateRangePicker> &
    CommonLocale;

type FadeProps

type FadeProps = TransitionProps;

type FooterProps

type FooterProps = ComponentProps;

type HeaderProps

type HeaderProps = ComponentProps;

type HeadingGroupProps

type HeadingGroupProps = ComponentProps;

type InputPickerLocale

type InputPickerLocale = PickerLocale & typeof defaultLocale.InputPicker;

type Locale

type Locale = PickKeys<typeof defaultLocale>;

type MaskedInputProps

type MaskedInputProps = Omit<TextMaskProps, 'onChange'> & Omit<InputProps, 'type'>;

type ModalBodyProps

type ModalBodyProps = WithAsProps;

type ModalFooterProps

type ModalFooterProps = ComponentProps;

type ModalTitleProps

type ModalTitleProps = ComponentProps;

type NavbarBodyProps

type NavbarBodyProps = ComponentProps;

type NavbarBrandProps

type NavbarBrandProps = ComponentProps;

type NavbarHeaderProps

type NavbarHeaderProps = ComponentProps;

type PaginationLocale

type PaginationLocale = PickKeys<typeof defaultLocale.Pagination>;

type PickerLocale

type PickerLocale = typeof defaultLocale.Combobox & CommonLocale;

type PlaintextLocale

type PlaintextLocale = PickKeys<typeof defaultLocale.Plaintext>;

type RangeSliderProps

type RangeSliderProps = SliderProps<Range> & {
    /**
     * Add constraint to validate before onChange is dispatched
     */
    constraint?: (range: Range) => boolean;
};

type SidenavBodyProps

type SidenavBodyProps = ComponentProps;

type SidenavHeaderProps

type SidenavHeaderProps = ComponentProps;

type TableLocale

type TableLocale = CommonLocale;

type TableProps

type TableProps<
    Row extends RowDataType = any,
    Key extends RowKeyType = string
> = TableBaseProps<Row, Key>;

type TagGroupProps

type TagGroupProps = ComponentProps;

type TagInputProps

type TagInputProps = Omit<InputPickerProps<readonly string[]>, 'data'> &
    Partial<TagOnlyProps>;

type ToggleLocale

type ToggleLocale = PickKeys<typeof defaultLocale.Toggle>;

type UploaderLocale

type UploaderLocale = PickKeys<typeof defaultLocale.Uploader> & CommonLocale;

type VisuallyHiddenProps

type VisuallyHiddenProps = ComponentProps;

type WhisperInstance

type WhisperInstance = OverlayTriggerHandle;

type WhisperProps

type WhisperProps = OverlayTriggerProps;

Package Files (150)

Dependencies (15)

Dev Dependencies (0)

No dev dependencies.

Peer Dependencies (2)

Badge

To add a badge like this oneto your package's README, use the codes available below.

You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/rsuite.

Markdown

[![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/rsuite)

HTML

<a href="https://www.jsdocs.io/package/rsuite"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>

Updated 2 days ago.
Package analyzed in 14786 ms.
Missing or incorrect documentation? Open an issue for this package.

rsuite

Install

Overview

Index

Variables

Functions

Interfaces

Type Aliases

Variables

variable Accordion

See Also

variable Affix

See Also

variable Animation

variable AutoComplete

See Also

variable Avatar

See Also

variable AvatarGroup

See Also

variable Badge

See Also

variable Breadcrumb

See Also

variable Button

See Also

variable ButtonGroup

See Also

variable ButtonToolbar

See Also

variable Calendar

See Also

variable Card

variable CardGroup

variable Carousel

See Also

variable Cascader

See Also

variable CascadeTree

See Also

variable Checkbox

See Also

variable CheckboxGroup

See Also

variable CheckPicker

See Also

variable CheckTree

See Also

variable CheckTreePicker

See Also

variable Col

See Also

variable Container

See Also

variable Content

See Also

variable DateInput

See Also

variable DatePicker

See Also

variable DateRangeInput

See Also

variable DateRangePicker

See Also

variable Divider

See Also

variable DOMHelper

See Also

variable Drawer

See Also

variable Dropdown

See Also

variable FlexboxGrid

See Also

variable Footer

See Also

variable Form

See Also

variable Grid

See Also