primereact
Version:
PrimeReact is an open source UI library for React featuring a rich set of 90+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with Prime
1,040 lines • 1.12 MB
JSON
{
"$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
"framework": "react",
"name": "PrimeReact",
"version": "10.9.5",
"contributions": {
"html": {
"types-syntax": "typescript",
"description-markup": "markdown",
"tags": [
{
"name": "Accordion",
"source": {
"module": "PrimeReact",
"symbol": "Accordion"
},
"description": "Accordion groups a collection of contents in tabs.\n\n[Live Demo](https://www.primereact.org/accordion/)\n\nHelper Components:\n\n- AccordionTab",
"doc-url": "https://www.primereact.org/accordion/",
"attributes": [
{
"name": "activeIndex",
"default": "null",
"description": "Active index or indexes of the element. Use an array of numbers for multiple indexes.\nThe multiple prop must be set to true in order to specify multiple indexes.",
"value": {
"kind": "expression",
"type": "null | number | number[]"
}
},
{
"name": "multiple",
"default": "false",
"description": "When enabled, multiple tabs can be activated at the same time.",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "expandIcon",
"default": "null",
"description": "Icon of a collapsed tab.",
"value": {
"kind": "expression",
"type": "IconType<AccordionProps>"
}
},
{
"name": "collapseIcon",
"default": "null",
"description": "Icon of an expanded tab.",
"value": {
"kind": "expression",
"type": "IconType<AccordionProps>"
}
},
{
"name": "transitionOptions",
"default": "null",
"description": "The properties of CSSTransition can be customized, except for \"nodeRef\" and \"in\" properties.",
"value": {
"kind": "expression",
"type": "CSSTransitionProps"
}
},
{
"name": "children",
"default": "null",
"description": "Used to get the child elements of the component.",
"value": {
"kind": "expression",
"type": "ReactNode"
}
},
{
"name": "pt",
"default": "null",
"description": "Uses to pass attributes to DOM elements inside the component.",
"value": {
"kind": "expression",
"type": "AccordionPassThroughOptions"
}
},
{
"name": "ptOptions",
"default": "null",
"description": "Used to configure passthrough(pt) options of the component.",
"value": {
"kind": "expression",
"type": "PassThroughOptions"
}
}
],
"events": [
{
"name": "onTabOpen",
"description": "Callback to invoke when a tab gets expanded.",
"arguments": [
{
"name": "event",
"type": "AccordionTabOpenEvent",
"description": "Custom tab open event."
}
]
},
{
"name": "onTabClose",
"description": "Callback to invoke when an active tab is collapsed by clicking on the header.",
"arguments": [
{
"name": "event",
"type": "AccordionTabCloseEvent",
"description": "Custom tab close event."
}
]
},
{
"name": "onTabChange",
"description": "Callback to invoke when state of the accordion changes.",
"arguments": [
{
"name": "event",
"type": "AccordionTabChangeEvent",
"description": "Custom tab close event."
}
]
}
]
},
{
"name": "Api",
"source": {
"module": "PrimeReact",
"symbol": "Api"
},
"description": "API for PrimeReact components.",
"doc-url": ""
},
{
"name": "Autocomplete",
"source": {
"module": "PrimeReact",
"symbol": "Autocomplete"
},
"description": "AutoComplete is an input component that provides real-time suggestions while being typed.\n\n[Live Demo](https://www.primereact.org/autocomplete/)",
"doc-url": "https://www.primereact.org/autocomplete/",
"attributes": [
{
"name": "id",
"default": "null",
"description": "Unique identifier of the element.",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "appendTo",
"default": "document.body",
"description": "DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and \"self\". The \"self\" value is used to render a component where it is located.",
"value": {
"kind": "expression",
"type": "null | HTMLElement | \"self\" | Function"
}
},
{
"name": "autoFocus",
"default": "false",
"description": "When present, it specifies that the component should automatically get focus on load.",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "autoHighlight",
"default": "false",
"description": "When enabled, highlights the first item in the list by default.",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "className",
"default": "null",
"description": "Style class of the component.",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "delay",
"default": "300",
"description": "Delay between keystrokes to wait before sending a query.",
"value": {
"kind": "expression",
"type": "number"
}
},
{
"name": "invalid",
"default": "false",
"description": "When present, it specifies that the component should have invalid state style.",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "disabled",
"default": "false",
"description": "When present, it specifies that the component should be disabled.",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "variant",
"default": "outlined",
"description": "Specifies the input variant of the component.",
"value": {
"kind": "expression",
"type": "\"filled\" | \"outlined\""
}
},
{
"name": "dropdown",
"default": "false",
"description": "Displays a button next to the input field when enabled.",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "dropdownAriaLabel",
"default": "Choose",
"description": "ARIA label for the dropdown button. Defaults to placeholder then Locale \"choose\" label.",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "dropdownAutoFocus",
"default": "true",
"description": "Focus the input field when the dropdown button is clicked if enabled.",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "dropdownIcon",
"default": "null",
"description": "Icon of the dropdown.",
"value": {
"kind": "expression",
"type": "IconType<AutoCompleteProps<T>>"
}
},
{
"name": "dropdownMode",
"default": "blank",
"description": "Specifies the behavior dropdown button. Default \"blank\" mode sends an empty string and \"current\" mode sends the input value.",
"value": {
"kind": "expression",
"type": "\"blank\" | \"current\""
}
},
{
"name": "emptyMessage",
"default": "No results found.",
"description": "Text to display when there is no data. Defaults to global value in i18n translation configuration.",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "field",
"default": "null",
"description": "Field of a suggested object to resolve and display.",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "forceSelection",
"default": "false",
"description": "When present, autocomplete clears the manual input if it does not match of the suggestions to force only accepting values from the suggestions.",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "inputClassName",
"default": "null",
"description": "Style class of the input field.",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "inputId",
"default": "null",
"description": "Identifier of the input element.",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "inputRef",
"default": "null",
"description": "Reference of the input element.",
"value": {
"kind": "expression",
"type": "Ref<HTMLInputElement>"
}
},
{
"name": "inputStyle",
"default": "null",
"description": "Inline style of the input field.",
"value": {
"kind": "expression",
"type": "CSSProperties"
}
},
{
"name": "loadingIcon",
"default": "null",
"description": "Icon of the loader.",
"value": {
"kind": "expression",
"type": "IconType<AutoCompleteProps<any>>"
}
},
{
"name": "itemTemplate",
"default": "null",
"description": "Template of a list item.",
"value": {
"kind": "expression",
"type": "ReactNode | Function"
}
},
{
"name": "maxLength",
"default": "null",
"description": "Maximum number of characters to initiate a search.",
"value": {
"kind": "expression",
"type": "number"
}
},
{
"name": "minLength",
"default": "1",
"description": "Minimum number of characters to initiate a search.",
"value": {
"kind": "expression",
"type": "number"
}
},
{
"name": "multiple",
"default": "false",
"description": "Specifies if multiple values can be selected.",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "selectionLimit",
"default": "null",
"description": "Number of maximum options that can be selected.",
"value": {
"kind": "expression",
"type": "number"
}
},
{
"name": "name",
"default": "null",
"description": "Name of the input element.",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "optionGroupChildren",
"default": "null",
"description": "Property name or getter function that refers to the children options of option group.",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "optionGroupLabel",
"default": "null",
"description": "Property name or getter function to use as the label of an option group.",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "optionGroupTemplate",
"default": "null",
"description": "Template of an option group item.",
"value": {
"kind": "expression",
"type": "ReactNode | Function"
}
},
{
"name": "panelClassName",
"default": "null",
"description": "Style class of the overlay panel element.",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "panelFooterTemplate",
"default": "null",
"description": "Template of the panel footer.",
"value": {
"kind": "expression",
"type": "ReactNode | Function"
}
},
{
"name": "panelStyle",
"default": "null",
"description": "Inline style of the overlay panel element.",
"value": {
"kind": "expression",
"type": "CSSProperties"
}
},
{
"name": "placeholder",
"default": "null",
"description": "Hint text for the input field.",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "readOnly",
"default": "false",
"description": "When present, it specifies that the input cannot be typed.",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "required",
"default": "false",
"description": "When present, it specifies that an input field must be filled out before submitting the form.",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "removeTokenIcon",
"default": "null",
"description": "Icon of the remove chip element in multiple mode.",
"value": {
"kind": "expression",
"type": "IconType<AutoCompleteProps<any>>"
}
},
{
"name": "scrollHeight",
"default": "200px",
"description": "Maximum height of the suggestions panel.",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "selectedItemTemplate",
"default": "null",
"description": "Template of a selected item. In multiple mode, it is used to customize the chips using a ReactNode. In single mode, it is used to customize the text using a string.",
"value": {
"kind": "expression",
"type": "ReactNode | Function"
}
},
{
"name": "showEmptyMessage",
"default": "false",
"description": "Whether to show the empty message or not.",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "size",
"default": "null",
"description": "Size of the input field.",
"value": {
"kind": "expression",
"type": "number"
}
},
{
"name": "style",
"default": "null",
"description": "Inline style of the component.",
"value": {
"kind": "expression",
"type": "CSSProperties"
}
},
{
"name": "suggestions",
"default": "null",
"description": "An array of suggestions to display.",
"value": {
"kind": "expression",
"type": "(T extends any[] ? T[number] : T)[]"
}
},
{
"name": "tabIndex",
"default": "null",
"description": "Index of the element in tabbing order.",
"value": {
"kind": "expression",
"type": "number"
}
},
{
"name": "tooltip",
"default": "null",
"description": "Content of the tooltip.",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "tooltipOptions",
"default": "null",
"description": "Configuration of the tooltip, refer to the tooltip documentation for more information.",
"value": {
"kind": "expression",
"type": "TooltipOptions"
}
},
{
"name": "transitionOptions",
"default": "null",
"description": "The properties of CSSTransition can be customized, except for \"nodeRef\" and \"in\" properties.",
"value": {
"kind": "expression",
"type": "CSSTransitionProps"
}
},
{
"name": "type",
"default": "null",
"description": "Type of the input element.",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "value",
"default": "null",
"description": "Value of the component.",
"value": {
"kind": "expression",
"type": "string | number | readonly string[] | T"
}
},
{
"name": "virtualScrollerOptions",
"default": "null",
"description": "Whether to use the virtualScroller feature. The properties of VirtualScroller component can be used like an object in it.",
"value": {
"kind": "expression",
"type": "VirtualScrollerProps"
}
},
{
"name": "children",
"default": "null",
"description": "Used to get the child elements of the component.",
"value": {
"kind": "expression",
"type": "ReactNode"
}
},
{
"name": "pt",
"default": "null",
"description": "Uses to pass attributes to DOM elements inside the component.",
"value": {
"kind": "expression",
"type": "AutoCompletePassThroughOptions"
}
},
{
"name": "ptOptions",
"default": "null",
"description": "Used to configure passthrough(pt) options of the component.",
"value": {
"kind": "expression",
"type": "PassThroughOptions"
}
},
{
"name": "unstyled",
"default": "false",
"description": "When enabled, it removes component related styles in the core.",
"value": {
"kind": "expression",
"type": "boolean"
}
}
],
"events": [
{
"name": "completeMethod",
"description": "Callback to invoke to search for suggestions.",
"arguments": [
{
"name": "event",
"type": "AutoCompleteCompleteEvent",
"description": "Custom complete method event."
}
]
},
{
"name": "onBlur",
"description": "Callback to invoke when autocomplete loses focus.",
"arguments": [
{
"name": "event",
"type": "FocusEvent<HTMLInputElement, Element>",
"description": "Browser event."
}
]
},
{
"name": "onChange",
"description": "Callback to invoke when autocomplete value changes.",
"arguments": [
{
"name": "event",
"type": "AutoCompleteChangeEvent<T>",
"description": "Custom change event."
}
]
},
{
"name": "onClear",
"description": "Callback to invoke when input is cleared by the user.",
"arguments": [
{
"name": "event",
"type": "SyntheticEvent<Element, Event>",
"description": "Browser event."
}
]
},
{
"name": "onClick",
"description": "Callback to invoke on click.",
"arguments": [
{
"name": "event",
"type": "MouseEvent<HTMLElement, MouseEvent>",
"description": "Browser event."
}
]
},
{
"name": "onContextMenu",
"description": "Callback to invoke on right-click.",
"arguments": [
{
"name": "event",
"type": "MouseEvent<HTMLElement, MouseEvent>",
"description": "Browser event."
}
]
},
{
"name": "onDblClick",
"description": "Callback to invoke on double click.",
"arguments": [
{
"name": "event",
"type": "MouseEvent<HTMLElement, MouseEvent>",
"description": "Browser event."
}
]
},
{
"name": "onDropdownClick",
"description": "Callback to invoke to when dropdown button is clicked.",
"arguments": [
{
"name": "event",
"type": "AutoCompleteDropdownClickEvent",
"description": "Custom click event."
}
]
},
{
"name": "onFocus",
"description": "Callback to invoke when autocomplete gets focus.",
"arguments": [
{
"name": "event",
"type": "FocusEvent<HTMLInputElement, Element>",
"description": "Browser event."
}
]
},
{
"name": "onHide",
"description": "Callback to invoke when overlay panel becomes hidden.",
"arguments": []
},
{
"name": "onKeyPress",
"description": "Callback to invoke to when a key is pressed.",
"arguments": [
{
"name": "event",
"type": "KeyboardEvent<HTMLInputElement>",
"description": "Browser event."
}
]
},
{
"name": "onKeyUp",
"description": "Callback to invoke to when a key is released.",
"arguments": [
{
"name": "event",
"type": "KeyboardEvent<HTMLInputElement>",
"description": "Browser event."
}
]
},
{
"name": "onMouseDown",
"description": "Callback to invoke to when a mouse button is pressed.",
"arguments": [
{
"name": "event",
"type": "MouseEvent<HTMLElement, MouseEvent>",
"description": "Browser event."
}
]
},
{
"name": "onSelect",
"description": "Callback to invoke when a suggestion is selected.",
"arguments": [
{
"name": "event",
"type": "AutoCompleteSelectEvent<T>",
"description": "Custom select event."
}
]
},
{
"name": "onShow",
"description": "Callback to invoke when overlay panel becomes visible.",
"arguments": []
},
{
"name": "onUnselect",
"description": "Callback to invoke when a selected value is removed.",
"arguments": [
{
"name": "event",
"type": "AutoCompleteUnselectEvent<T>",
"description": "Custom unselect event."
}
]
}
]
},
{
"name": "Avatar",
"source": {
"module": "PrimeReact",
"symbol": "Avatar"
},
"description": "Avatar represents people using icons, labels and images.\n\n[Live Demo](https://www.primereact.org/avatar)",
"doc-url": "https://www.primereact.org/avatar",
"attributes": [
{
"name": "icon",
"default": "null",
"description": "Defines the icon to display.",
"value": {
"kind": "expression",
"type": "IconType<AvatarProps>"
}
},
{
"name": "image",
"default": "null",
"description": "Defines the image to display.",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "imageAlt",
"default": "avatar",
"description": "It specifies an alternate text for an image, if the image cannot be displayed.",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "imageFallback",
"default": "default",
"description": "Defines a fallback image or URL if the main image fails to load. If \"default\" will fallback to label then icon.",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "label",
"default": "null",
"description": "Defines the text to display.",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "shape",
"default": "square",
"description": "Shape of the element.",
"value": {
"kind": "expression",
"type": "\"square\" | \"circle\""
}
},
{
"name": "size",
"default": "normal",
"description": "Size of the element.",
"value": {
"kind": "expression",
"type": "\"normal\" | \"large\" | \"xlarge\""
}
},
{
"name": "template",
"default": "null",
"description": "Template of the content.",
"value": {
"kind": "expression",
"type": "ReactNode | Function"
}
},
{
"name": "children",
"default": "null",
"description": "Used to get the child elements of the component.",
"value": {
"kind": "expression",
"type": "ReactNode"
}
},
{
"name": "pt",
"default": "null",
"description": "Uses to pass attributes to DOM elements inside the component.",
"value": {
"kind": "expression",
"type": "AvatarPassThroughOptions"
}
},
{
"name": "ptOptions",
"default": "null",
"description": "Used to configure passthrough(pt) options of the component.",
"value": {
"kind": "expression",
"type": "PassThroughOptions"
}
},
{
"name": "unstyled",
"default": "false",
"description": "When enabled, it removes component related styles in the core.",
"value": {
"kind": "expression",
"type": "boolean"
}
}
],
"events": [
{
"name": "onImageError",
"description": "This event is triggered if an error occurs while loading an image file.",
"arguments": [
{
"name": "event",
"type": "SyntheticEvent<Element, Event>",
"description": "Browser event."
}
]
},
{
"name": "onClick",
"description": "Callback to invoke on click.",
"arguments": [
{
"name": "event",
"type": "MouseEvent<HTMLElement, MouseEvent>",
"description": "Browser event."
}
]
}
]
},
{
"name": "Avatargroup",
"source": {
"module": "PrimeReact",
"symbol": "Avatargroup"
},
"description": "A set of Avatars can be displayed together using the AvatarGroup component.\n\n[Live Demo](https://www.primereact.org/avatar/)",
"doc-url": "https://www.primereact.org/avatar/",
"attributes": [
{
"name": "children",
"default": "null",
"description": "Used to get the child elements of the component.",
"value": {
"kind": "expression",
"type": "ReactNode"
}
},
{
"name": "pt",
"default": "null",
"description": "Uses to pass attributes to DOM elements inside the component.",
"value": {
"kind": "expression",
"type": "AvatarGroupPassThroughOptions"
}
},
{
"name": "ptOptions",
"default": "null",
"description": "Used to configure passthrough(pt) options of the component.",
"value": {
"kind": "expression",
"type": "PassThroughOptions"
}
},
{
"name": "unstyled",
"default": "false",
"description": "When enabled, it removes component related styles in the core.",
"value": {
"kind": "expression",
"type": "boolean"
}
}
],
"events": []
},
{
"name": "Badge",
"source": {
"module": "PrimeReact",
"symbol": "Badge"
},
"description": "Badge represents people using icons, labels and images.\n\n[Live Demo](https://www.primereact.org/badge)",
"doc-url": "https://www.primereact.org/badge",
"attributes": [
{
"name": "value",
"default": "null",
"description": "Value to display inside the badge.",
"value": {
"kind": "expression",
"type": "any"
}
},
{
"name": "severity",
"default": "null",
"description": "Severity type of the badge.",
"value": {
"kind": "expression",
"type": "null | \"success\" | \"warning\" | \"secondary\" | \"info\" | \"danger\" | \"contrast\""
}
},
{
"name": "size",
"default": "null",
"description": "Size of the badge, valid options are \"large\" and \"xlarge\".",
"value": {
"kind": "expression",
"type": "null | \"normal\" | \"large\" | \"xlarge\""
}
},
{
"name": "children",
"default": "null",
"description": "Used