rsuite
- Version 5.80.1
- Published
- 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
- Accordion
- Affix
- Animation
- AutoComplete
- Avatar
- AvatarGroup
- Badge
- Breadcrumb
- Button
- ButtonGroup
- ButtonToolbar
- Calendar
- Card
- CardGroup
- Carousel
- Cascader
- CascadeTree
- Checkbox
- CheckboxGroup
- CheckPicker
- CheckTree
- CheckTreePicker
- Col
- Container
- Content
- DateInput
- DatePicker
- DateRangeInput
- DateRangePicker
- Divider
- DOMHelper
- Drawer
- Dropdown
- FlexboxGrid
- Footer
- Form
- Grid
- Header
- Heading
- HeadingGroup
- Highlight
- HStack
- IconButton
- Image
- InlineEdit
- Input
- InputGroup
- InputNumber
- InputPicker
- List
- Loader
- MaskedInput
- Message
- Modal
- MultiCascader
- MultiCascadeTree
- Nav
- Navbar
- Notification
- Pagination
- Panel
- PanelGroup
- Placeholder
- Popover
- Progress
- Radio
- RadioGroup
- RadioTile
- RadioTileGroup
- RangeSlider
- Rate
- Row
- SafeAnchor
- Schema
- SelectPicker
- Sidebar
- Sidenav
- Slider
- Stack
- Stat
- StatGroup
- Steps
- Table
- Tabs
- Tag
- TagGroup
- TagInput
- TagPicker
- Text
- Timeline
- TimePicker
- TimeRangePicker
- toaster
- Toggle
- Tooltip
- Tree
- TreePicker
- Uploader
- useMediaQuery
- VisuallyHidden
- VStack
- Whisper
Functions
Interfaces
DatePickerProps
- calendarDefaultDate
- caretAs
- disabled
- editable
- format
- hideHours
- hideMinutes
- hideSeconds
- isoWeek
- label
- limitEndYear
- limitStartYear
- loading
- monthDropdownProps
- onChangeCalendarDate
- onClean
- oneTap
- onNextMonth
- onOk
- onPrevMonth
- onSelect
- onShortcutClick
- onToggleMonthDropdown
- onToggleTimeDropdown
- plaintext
- ranges
- readOnly
- renderCell
- renderValue
- shouldDisableDate
- shouldDisableHour
- shouldDisableMinute
- shouldDisableSecond
- showMeridian
- showMeridiem
- showWeekNumbers
- weekStart
DateRangePickerProps
- calendarSnapping
- caretAs
- character
- defaultCalendarValue
- disabledDate
- editable
- format
- hideHours
- hideMinutes
- hideSeconds
- hoverRange
- isoWeek
- label
- limitEndYear
- limitStartYear
- loading
- monthDropdownProps
- onClean
- oneTap
- onOk
- onSelect
- onShortcutClick
- ranges
- renderCell
- renderTitle
- renderValue
- shouldDisableDate
- shouldDisableHour
- shouldDisableMinute
- shouldDisableSecond
- showHeader
- showMeridian
- showMeridiem
- showOneCalendar
- showWeekNumbers
- weekStart
UploaderProps
- accept
- action
- autoUpload
- children
- data
- defaultFileList
- disabled
- disabledFileItem
- disableMultipart
- draggable
- fileList
- fileListVisible
- headers
- listType
- locale
- maxPreviewFileSize
- method
- multiple
- name
- onChange
- onError
- onPreview
- onProgress
- onRemove
- onReupload
- onSuccess
- onUpload
- plaintext
- readOnly
- removable
- renderFileInfo
- renderThumbnail
- shouldQueueUpdate
- shouldUpload
- timeout
- toggleAs
- withCredentials
Type Aliases
- AccordionProps
- BounceProps
- BreadcrumbLocale
- ContainerProps
- ContentProps
- DatePickerLocale
- DateRangePickerLocale
- FadeProps
- FooterProps
- HeaderProps
- HeadingGroupProps
- InputPickerLocale
- Locale
- MaskedInputProps
- ModalBodyProps
- ModalFooterProps
- ModalTitleProps
- NavbarBodyProps
- NavbarBrandProps
- NavbarHeaderProps
- PaginationLocale
- PickerLocale
- PlaintextLocale
- RangeSliderProps
- SidenavBodyProps
- SidenavHeaderProps
- TableLocale
- TableProps
- TagGroupProps
- TagInputProps
- ToggleLocale
- UploaderLocale
- VisuallyHiddenProps
- WhisperInstance
- WhisperProps
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
variable Breadcrumb
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
variable Dropdown
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
variable Footer
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
variable Header
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
variable Modal
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
variable Navbar
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
variable Pagination
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
variable Popover
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 ofRadio
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 ofRadioTile
components. 5.35.0See 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/
variable Sidebar
const Sidebar: RsRefForwardingComponent<'aside', SidebarProps>;
The
Sidebar
component for use with theContainer
component.See Also
https://rsuitejs.com/components/container/
variable Sidenav
const Sidenav: SidenavComponent;
The
Sidenav
component is an encapsulation of the page sidebarNav
.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
variable TagGroup
const TagGroup: RsRefForwardingComponent<'div', any>;
The
TagGroup
component for use with theTag
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
variable Tooltip
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 theTooltip
andPopover
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 {}
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 theimg
element.
property src
src?: string;
The
src
attribute for theimg
element.
property srcSet
srcSet?: string;
The
srcSet
attribute for theimg
element. Use this attribute for responsive image display.
interface BadgeProps
interface BadgeProps extends WithAsProps {}
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
oraria-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
oraria-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
istrue
, the value ofweekStart
is ignored.0
interface CardGroupProps
interface CardGroupProps extends WithAsProps {}
interface CardProps
interface CardProps extends WithAsProps {}
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'> {}
interface CheckboxGroupProps
interface CheckboxGroupProps<V = ValueType[]> extends WithAsProps, FormControlBaseProps<V> {}
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. ThedefaultProps
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
istrue
, the value ofweekStart
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
istrue
, the value ofweekStart
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 {}
interface FlexboxGridProps
interface FlexboxGridProps extends WithAsProps {}
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 {}
interface FormGroupProps
interface FormGroupProps extends WithAsProps {}
property controlId
controlId?: string;
Sets id on
<Form.Control>
andhtmlFor
on<Form.ControlLabel>
. And generate ʻaria-labelledbyand ʻ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 {}
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 {}
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 theinput
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 theinput
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.
property header
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
property header
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> {}
interface PlaceholderGraphProps
interface PlaceholderGraphProps extends WithAsProps {}
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 {}
interface Progress
interface Progress extends RsRefForwardingComponent<'div', ProgressLineProps> {}
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> {}
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 SafeAnchorProps
interface SafeAnchorProps extends WithAsProps, React.HTMLAttributes<HTMLElement> {}
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 {}
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 {}
interface StatProps
interface StatProps extends WithAsProps {}
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 {}
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 {}
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)
- esm/Accordion/Accordion.d.ts
- esm/Affix/Affix.d.ts
- esm/Animation/Bounce.d.ts
- esm/Animation/Collapse.d.ts
- esm/Animation/Fade.d.ts
- esm/Animation/Slide.d.ts
- esm/Animation/Transition.d.ts
- esm/Animation/index.d.ts
- esm/AutoComplete/AutoComplete.d.ts
- esm/Avatar/Avatar.d.ts
- esm/AvatarGroup/AvatarGroup.d.ts
- esm/Badge/Badge.d.ts
- esm/Breadcrumb/Breadcrumb.d.ts
- esm/Breadcrumb/BreadcrumbItem.d.ts
- esm/Button/Button.d.ts
- esm/ButtonGroup/ButtonGroup.d.ts
- esm/ButtonToolbar/ButtonToolbar.d.ts
- esm/Calendar/Calendar.d.ts
- esm/Card/Card.d.ts
- esm/CardGroup/CardGroup.d.ts
- esm/Carousel/Carousel.d.ts
- esm/CascadeTree/CascadeTree.d.ts
- esm/CascadeTree/types.d.ts
- esm/Cascader/Cascader.d.ts
- esm/CheckPicker/CheckPicker.d.ts
- esm/CheckTree/CheckTree.d.ts
- esm/CheckTreePicker/CheckTreePicker.d.ts
- esm/Checkbox/Checkbox.d.ts
- esm/CheckboxGroup/CheckboxGroup.d.ts
- esm/Col/Col.d.ts
- esm/Container/Container.d.ts
- esm/Content/Content.d.ts
- esm/CustomProvider/CustomContext.d.ts
- esm/CustomProvider/CustomProvider.d.ts
- esm/DOMHelper/index.d.ts
- esm/DateInput/DateInput.d.ts
- esm/DatePicker/DatePicker.d.ts
- esm/DateRangeInput/DateRangeInput.d.ts
- esm/DateRangePicker/DateRangePicker.d.ts
- esm/Divider/Divider.d.ts
- esm/Drawer/Drawer.d.ts
- esm/Dropdown/Dropdown.d.ts
- esm/Dropdown/DropdownItem.d.ts
- esm/Dropdown/DropdownMenu.d.ts
- esm/FlexboxGrid/FlexboxGrid.d.ts
- esm/FlexboxGrid/FlexboxGridItem.d.ts
- esm/Footer/Footer.d.ts
- esm/Form/Form.d.ts
- esm/Form/hooks/useFormClassNames.d.ts
- esm/Form/hooks/useFormRef.d.ts
- esm/FormControl/FormControl.d.ts
- esm/FormControlLabel/FormControlLabel.d.ts
- esm/FormErrorMessage/FormErrorMessage.d.ts
- esm/FormGroup/FormGroup.d.ts
- esm/FormHelpText/FormHelpText.d.ts
- esm/Grid/Grid.d.ts
- esm/Header/Header.d.ts
- esm/Heading/Heading.d.ts
- esm/HeadingGroup/HeadingGroup.d.ts
- esm/Highlight/Highlight.d.ts
- esm/IconButton/IconButton.d.ts
- esm/Image/Image.d.ts
- esm/InlineEdit/InlineEdit.d.ts
- esm/Input/Input.d.ts
- esm/InputGroup/InputGroup.d.ts
- esm/InputNumber/InputNumber.d.ts
- esm/InputPicker/InputPicker.d.ts
- esm/List/List.d.ts
- esm/List/ListItem.d.ts
- esm/Loader/Loader.d.ts
- esm/MaskedInput/MaskedInput.d.ts
- esm/Message/Message.d.ts
- esm/Modal/Modal.d.ts
- esm/Modal/ModalBody.d.ts
- esm/Modal/ModalDialog.d.ts
- esm/Modal/ModalFooter.d.ts
- esm/Modal/ModalHeader.d.ts
- esm/Modal/ModalTitle.d.ts
- esm/MultiCascadeTree/MultiCascadeTree.d.ts
- esm/MultiCascadeTree/types.d.ts
- esm/MultiCascader/MultiCascader.d.ts
- esm/Nav/Nav.d.ts
- esm/Nav/NavItem.d.ts
- esm/Navbar/Navbar.d.ts
- esm/Navbar/NavbarBody.d.ts
- esm/Navbar/NavbarBrand.d.ts
- esm/Navbar/NavbarHeader.d.ts
- esm/Notification/Notification.d.ts
- esm/Pagination/Pagination.d.ts
- esm/Pagination/PaginationButton.d.ts
- esm/Pagination/PaginationGroup.d.ts
- esm/Panel/Panel.d.ts
- esm/PanelGroup/PanelGroup.d.ts
- esm/Placeholder/Placeholder.d.ts
- esm/Placeholder/PlaceholderGraph.d.ts
- esm/Placeholder/PlaceholderGrid.d.ts
- esm/Placeholder/PlaceholderParagraph.d.ts
- esm/Popover/Popover.d.ts
- esm/Progress/Progress.d.ts
- esm/Progress/ProgressCircle.d.ts
- esm/Progress/ProgressLine.d.ts
- esm/Radio/Radio.d.ts
- esm/RadioGroup/RadioGroup.d.ts
- esm/RadioTile/RadioTile.d.ts
- esm/RadioTileGroup/RadioTileGroup.d.ts
- esm/RangeSlider/RangeSlider.d.ts
- esm/Rate/Rate.d.ts
- esm/Row/Row.d.ts
- esm/SafeAnchor/SafeAnchor.d.ts
- esm/Schema/Schema.d.ts
- esm/SelectPicker/SelectPicker.d.ts
- esm/Sidebar/Sidebar.d.ts
- esm/Sidenav/Sidenav.d.ts
- esm/Sidenav/SidenavBody.d.ts
- esm/Sidenav/SidenavHeader.d.ts
- esm/Sidenav/SidenavToggle.d.ts
- esm/Slider/Slider.d.ts
- esm/Stack/HStack.d.ts
- esm/Stack/Stack.d.ts
- esm/Stack/VStack.d.ts
- esm/Stat/Stat.d.ts
- esm/StatGroup/StatGroup.d.ts
- esm/Steps/StepItem.d.ts
- esm/Steps/Steps.d.ts
- esm/Table/Table.d.ts
- esm/Table/index.d.ts
- esm/Tabs/Tabs.d.ts
- esm/Tag/Tag.d.ts
- esm/TagGroup/TagGroup.d.ts
- esm/TagInput/index.d.ts
- esm/TagPicker/index.d.ts
- esm/Text/Text.d.ts
- esm/TimePicker/TimePicker.d.ts
- esm/TimeRangePicker/TimeRangePicker.d.ts
- esm/Timeline/Timeline.d.ts
- esm/Timeline/TimelineItem.d.ts
- esm/Toggle/Toggle.d.ts
- esm/Tooltip/Tooltip.d.ts
- esm/Tree/Tree.d.ts
- esm/TreePicker/TreePicker.d.ts
- esm/Uploader/Uploader.d.ts
- esm/VisuallyHidden/VisuallyHidden.d.ts
- esm/Whisper/Whisper.d.ts
- esm/index.d.ts
- esm/internals/Picker/types.d.ts
- esm/locales/index.d.ts
- esm/toaster/toaster.d.ts
- esm/useBreakpointValue/useBreakpointValue.d.ts
- esm/useMediaQuery/useMediaQuery.d.ts
- esm/useToaster/useToaster.d.ts
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[](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 .
Package analyzed in 14786 ms. - Missing or incorrect documentation? Open an issue for this package.