UNPKG

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,257 lines 569 kB
{ "framework": "React", "name": "PrimeReact", "version": "9.2.1", "tags": [ { "name": "Accordion", "source": { "module": "PrimeReact", "symbol": "Accordion" }, "description": "Accordion groups a collection of contents in tabs.", "doc-url": "https://primefaces.org/primereact/showcase/#/accordion", "props": [ { "name": "id", "type": "string", "default": "null", "description": "Unique identifier of the element." }, { "name": "activeIndex", "type": "number|number[]", "default": "null", "description": "Active index or indexes of the element. Use an array of numbers for multiple indexes. the \"multiple\" prop must be set to true in order to specify multiple indexes." }, { "name": "className", "type": "string", "default": "null", "description": "Style class of the element." }, { "name": "style", "type": "React.CSSProperties", "default": "null", "description": "Inline style of the element." }, { "name": "multiple", "type": "boolean", "default": "false", "description": "When enabled, multiple tabs can be activated at the same time." }, { "name": "expandIcon", "type": "string", "default": "pi pi-chevron-right", "description": "Icon of a collapsed tab." }, { "name": "collapseIcon", "type": "string", "default": "pi pi-chevron-down", "description": "Icon of an expanded tab." }, { "name": "transitionOptions", "type": "object", "default": "null", "description": "The properties of <a href=\"https://reactcommunity.org/react-transition-group/css-transition\" rel=\"noopener noreferrer\" target=\"_blank\">CSSTransition</a> can be customized, except for \"nodeRef\" and \"in\" properties." } ], "events": [ { "name": "onTabOpen", "description": "Callback to invoke when a tab gets expanded.", "arguments": [ { "name": "originalEvent", "type": "object", "description": "Browser event." }, { "name": "index", "type": "number", "description": "Index or indexes of the tab (number or array of numbers)." } ] }, { "name": "onTabClose", "description": "Callback to invoke when an active tab is collapsed by clicking on the header.", "arguments": [ { "name": "originalEvent", "type": "object", "description": "Browser event." }, { "name": "index", "type": "number", "description": "Index of the tab." } ] }, { "name": "onTabChange", "description": "Callback to invoke when state of the accordion changes.", "arguments": [ { "name": "originalEvent", "type": "object", "description": "Browser event." }, { "name": "index", "type": "number", "description": "Index of the tab." } ] } ] }, { "name": "AccordionTab", "source": { "module": "PrimeReact", "symbol": "AccordionTab" }, "description": "Accordion element consists of one or more AccordionTab elements.", "doc-url": "https://primefaces.org/primereact/showcase/#/accordion", "props": [ { "name": "header", "type": "string", "default": "null", "description": "Orientation of tab headers." }, { "name": "disabled", "type": "boolean", "default": "false", "description": "Whether the tab is disabled." }, { "name": "headerClassName", "type": "string", "default": "null", "description": "Style class of the tab header." }, { "name": "headerStyle", "type": "object", "default": "null", "description": "Inline style of the tab header." }, { "name": "headerTemplate", "type": "any", "default": "null", "description": "Template of the tab header." }, { "name": "contentClassName", "type": "string", "default": "null", "description": "Style class of the tab content." }, { "name": "contentStyle", "type": "object", "default": "null", "description": "Inline style of the tab content." } ], "events": [] }, { "name": "AutoComplete", "source": { "module": "PrimeReact", "symbol": "AutoComplete" }, "description": "AutoComplete is an input component that provides real-time suggestions while being typed.", "doc-url": "https://primefaces.org/primereact/showcase/#/autocomplete", "props": [ { "name": "id", "type": "string", "default": "null", "description": "Unique identifier of the element." }, { "name": "value", "type": "any", "default": "null", "description": "Value of the component." }, { "name": "name", "type": "string", "default": "null", "description": "Name of the input element." }, { "name": "type", "type": "string", "default": "text", "description": "Type of the input element." }, { "name": "suggestions", "type": "array", "default": "null", "description": "An array of suggestions to display." }, { "name": "field", "type": "any", "default": "null", "description": "Field of a suggested object to resolve and display." }, { "name": "optionGroupLabel", "type": "string", "default": "null", "description": "Property name or getter function to use as the label of an option group." }, { "name": "optionGroupChildren", "type": "string", "default": "null", "description": "Property name or getter function that refers to the children options of option group." }, { "name": "forceSelection", "type": "boolean", "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." }, { "name": "autoHighlight", "type": "boolean", "default": "false", "description": "When enabled, highlights the first item in the list by default." }, { "name": "scrollHeight", "type": "string", "default": "200px", "description": "Maximum height of the suggestions panel." }, { "name": "dropdown", "type": "boolean", "default": "false", "description": "Displays a button next to the input field when enabled." }, { "name": "dropdownMode", "type": "string", "default": "blank", "description": "Specifies the behavior dropdown button. Default \"blank\" mode sends an empty string and \"current\" mode sends the input value." }, { "name": "multiple", "type": "boolean", "default": "false", "description": "Specifies if multiple values can be selected." }, { "name": "selectionLimit", "type": "number", "default": "null", "description": "Number of maximum options that can be selected." }, { "name": "minLength", "type": "number", "default": "1", "description": "Minimum number of characters to initiate a search." }, { "name": "delay", "type": "number", "default": "300", "description": "Delay between keystrokes to wait before sending a query." }, { "name": "style", "type": "string", "default": "null", "description": "Inline style of the component." }, { "name": "className", "type": "string", "default": "null", "description": "Style class of the component." }, { "name": "inputId", "type": "string", "default": "null", "description": "Identifier of the input element." }, { "name": "inputStyle", "type": "string", "default": "null", "description": "Inline style of the input field." }, { "name": "inputClassName", "type": "string", "default": "null", "description": "Inline style of the input field." }, { "name": "panelClassName", "type": "string", "default": "null", "description": "Style class of the overlay panel element." }, { "name": "panelStyle", "type": "string", "default": "null", "description": "Inline style of the overlay panel element." }, { "name": "placeholder", "type": "string", "default": "null", "description": "Hint text for the input field." }, { "name": "readOnly", "type": "boolean", "default": "false", "description": "When present, it specifies that the input cannot be typed." }, { "name": "disabled", "type": "boolean", "default": "false", "description": "When present, it specifies that the component should be disabled." }, { "name": "maxLength", "type": "number", "default": "null", "description": "Maximum number of character allows in the input field." }, { "name": "size", "type": "number", "default": "null", "description": "Size of the input field." }, { "name": "appendTo", "type": "DOM element | string", "default": "document.body", "description": "DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and 'self'. The <i>self</i> value is used to render a component where it is located." }, { "name": "tabIndex", "type": "number", "default": "null", "description": "Index of the element in tabbing order." }, { "name": "autoFocus", "type": "boolean", "default": "false", "description": "When present, it specifies that the component should automatically get focus on load." }, { "name": "tooltip", "type": "any", "default": "null", "description": "Content of the tooltip." }, { "name": "tooltipOptions", "type": "object", "default": "null", "description": "Configuration of the tooltip, refer to the tooltip documentation for more information." }, { "name": "ariaLabelledBy", "type": "string", "default": "null", "description": "Establishes relationships between the component and label(s) where its value should be one or more element IDs." }, { "name": "itemTemplate", "type": "any", "default": "null", "description": "Template of a list item." }, { "name": "selectedItemTemplate", "type": "any", "default": "null", "description": "Template of a selected item." }, { "name": "optionGroupTemplate", "type": "any", "default": "null", "description": "Template of an option group item." }, { "name": "transitionOptions", "type": "object", "default": "null", "description": "The properties of <a href=\"https://reactcommunity.org/react-transition-group/css-transition\" rel=\"noopener noreferrer\" target=\"_blank\">CSSTransition</a> can be customized, except for \"nodeRef\" and \"in\" properties." }, { "name": "dropdownIcon", "type": "string", "default": "pi pi-chevron-down", "description": "Icon class of the dropdown icon." }, { "name": "dropdownAriaLabel", "type": "string", "default": "null", "description": "ARIA label for the dropdown button. Defaults to placeholder then Locale \"choose\" label." }, { "name": "virtualScrollerOptions", "type": "object", "default": "null", "description": "Whether to use the virtualScroller feature. The properties of <Link to=\"virtualscroller\">VirtualScroller</Link> component can be used like an object in it." } ], "events": [ { "name": "completeMethod", "description": "Callback to invoke to search for suggestions.", "arguments": [ { "name": "event.originalEvent", "type": "object", "description": "Browser event" }, { "name": "event.query", "type": "string", "description": "Value to search with" } ] }, { "name": "onChange", "description": "Callback to invoke when autocomplete value changes.", "arguments": [ { "name": "event.originalEvent", "type": "object", "description": "Browser event" }, { "name": "event.value", "type": "any", "description": "Value of the component" } ] }, { "name": "onFocus", "description": "Callback to invoke when autocomplete gets focus.", "arguments": [ { "name": "event", "type": "object", "description": "Browser event" } ] }, { "name": "onBlur", "description": "Callback to invoke when autocomplete loses focus.", "arguments": [ { "name": "event", "type": "object", "description": "Browser event" } ] }, { "name": "onSelect", "description": "Callback to invoke when a suggestion is selected.", "arguments": [ { "name": "event.originalEvent", "type": "object", "description": "Browser event" }, { "name": "event.value", "type": "any", "description": "Value of the component" } ] }, { "name": "onUnselect", "description": "Callback to invoke when a suggestion is selected.", "arguments": [ { "name": "event.originalEvent", "type": "object", "description": "Browser event" }, { "name": "event.value", "type": "any", "description": "Value of the component" } ] }, { "name": "onDropdownClick", "description": "Callback to invoke to when dropdown button is clicked.", "arguments": [ { "name": "event.originalEvent", "type": "object", "description": "Browser event" }, { "name": "event.query", "type": "string", "description": "Current value of the input field" } ] }, { "name": "onClick", "description": "Callback to invoke on click.", "arguments": [ { "name": "event", "type": "object", "description": "Browser event" } ] }, { "name": "onDblClick", "description": "Callback to invoke on double click.", "arguments": [ { "name": "event", "type": "object", "description": "Browser event" } ] }, { "name": "onMouseDown", "description": "Callback to invoke to when a mouse button is pressed.", "arguments": [ { "name": "event", "type": "object", "description": "Browser event" } ] }, { "name": "onKeyUp", "description": "Callback to invoke to when a key is released.", "arguments": [ { "name": "event", "type": "object", "description": "Browser event" } ] }, { "name": "onKeyPress", "description": "Callback to invoke to when a key is pressed.", "arguments": [ { "name": "event", "type": "object", "description": "Browser event" } ] }, { "name": "onContextMenu", "description": "Callback to invoke on right-click.", "arguments": [ { "name": "event", "type": "object", "description": "Browser event" } ] }, { "name": "onClear", "description": "Callback to invoke when input is cleared by the user.", "arguments": [ { "name": "event", "type": "object", "description": "Browser event" } ] }, { "name": "onShow", "description": "Callback to invoke when overlay panel becomes visible.", "arguments": [] }, { "name": "onHide", "description": "Callback to invoke when overlay panel becomes hidden.", "arguments": [] } ] }, { "name": "Avatar", "source": { "module": "PrimeReact", "symbol": "Avatar" }, "description": "Avatar represents people using icons, labels and images.", "doc-url": "https://primefaces.org/primereact/showcase/#/avatar", "props": [ { "name": "label", "type": "string", "default": "null", "description": "Defines the text to display." }, { "name": "icon", "type": "string", "default": "null", "description": "Defines the icon to display." }, { "name": "image", "type": "string", "default": "null", "description": "Defines the image to display." }, { "name": "imageAlt", "type": "any", "default": "null", "description": "It specifies an alternate text for an image, if the image cannot be displayed." }, { "name": "imageFallback", "type": "string", "default": "default", "description": "Defines a fallback image or URL if the main image fails to load. If \"default\" will fallback to label then icon." }, { "name": "size", "type": "string", "default": "null", "description": "Size of the element, valid options are \"large\" and \"xlarge\"." }, { "name": "shape", "type": "string", "default": "square", "description": "Shape of the element, valid options are \"square\" and \"circle\"." }, { "name": "template", "type": "any", "default": "null", "description": "Template of the content." } ], "events": [ { "name": "onImageError", "description": "This event is triggered if an error occurs while loading an image file.", "arguments": [ { "name": "event", "type": "object", "description": "Browser event" } ] }, { "name": "onClick", "description": "Callback to invoke on click.", "arguments": [ { "name": "event", "type": "object", "description": "Browser event" } ] } ] }, { "name": "AvatarGroup", "source": { "module": "PrimeReact", "symbol": "AvatarGroup" }, "description": "A set of Avatars can be displayed together using the AvatarGroup component.", "doc-url": "https://primefaces.org/primereact/showcase/#/avatargroup", "props": [], "events": [] }, { "name": "Badge", "source": { "module": "PrimeReact", "symbol": "Badge" }, "description": "Badge is a small status indicator for another element.", "doc-url": "https://primefaces.org/primereact/showcase/#/badge", "props": [ { "name": "value", "type": "any", "default": "null", "description": "Value to display inside the badge." }, { "name": "severity", "type": "string", "default": "null", "description": "Severity type of the badge." }, { "name": "size", "type": "string", "default": "null", "description": "Size of the badge, valid options are \"large\" and \"xlarge\"." } ], "events": [] }, { "name": "BlockUI", "source": { "module": "PrimeReact", "symbol": "BlockUI" }, "description": "BlockUI can either block other components or the whole page.", "doc-url": "https://primefaces.org/primereact/showcase/#/blockui", "props": [ { "name": "id", "type": "string", "default": "null", "description": "Unique identifier of the element." }, { "name": "blocked", "type": "boolean", "default": "false", "description": "Controls the blocked state." }, { "name": "fullScreen", "type": "boolean", "default": "false", "description": "When enabled, the whole document gets blocked." }, { "name": "baseZIndex", "type": "number", "default": "0", "description": "Base zIndex value to use in layering." }, { "name": "autoZIndex", "type": "boolean", "default": "true", "description": "Whether to automatically manage layering." }, { "name": "className", "type": "string", "default": "null", "description": "Style class of the element." }, { "name": "style", "type": "React.CSSProperties", "default": "null", "description": "Inline style of the element." }, { "name": "containerClassName", "type": "string", "default": "null", "description": "Style class of the container element." }, { "name": "containerStyle", "type": "React.CSSProperties", "default": "null", "description": "Inline style of the container element." }, { "name": "template", "type": "any", "default": "null", "description": "Template of mask." } ], "events": [ { "name": "onBlocked", "description": "Fired when the element gets blocked.", "arguments": [] }, { "name": "onUnblocked", "description": "Fired when the element gets unblocked.", "arguments": [] } ] }, { "name": "BreadCrumb", "source": { "module": "PrimeReact", "symbol": "BreadCrumb" }, "description": "Breadcrumb provides contextual information about page hierarchy.", "doc-url": "https://primefaces.org/primereact/showcase/#/breadcrumb", "props": [ { "name": "id", "type": "string", "default": "null", "description": "Unique identifier of the element." }, { "name": "model", "type": "MenuItem[]", "default": "null", "description": "An array of menuitems." }, { "name": "home", "type": "MenuItem", "default": "null", "description": "MenuItem configuration for the home icon." }, { "name": "style", "type": "string", "default": "null", "description": "Inline style of the component." }, { "name": "className", "type": "string", "default": "null", "description": "Style class of the component." } ], "events": [] }, { "name": "Button", "source": { "module": "PrimeReact", "symbol": "Button" }, "description": "Button is an extension to standard input element with icons and theming.", "doc-url": "https://primefaces.org/primereact/showcase/#/button", "props": [ { "name": "label", "type": "string", "default": "null", "description": "Text of the button." }, { "name": "icon", "type": "any", "default": "null", "description": "Name of the icon or JSX.Element for icon." }, { "name": "iconPos", "type": "string", "default": "left", "description": "Position of the icon, valid values are \"left\", \"right\", \"top\" and \"bottom\"." }, { "name": "badge", "type": "string", "default": "null", "description": "Value of the badge." }, { "name": "badgeClassName", "type": "string", "default": "null", "description": "Style class of the badge." }, { "name": "tooltip", "type": "any", "default": "null", "description": "Content of the tooltip." }, { "name": "tooltipOptions", "type": "object", "default": "null", "description": "Configuration of the tooltip, refer to the tooltip documentation for more information." }, { "name": "disabled", "type": "boolean", "default": "false", "description": "When present, it specifies that the element should be disabled." }, { "name": "visible", "type": "boolean", "default": "true", "description": "When present, it specifies that the element should be visible." }, { "name": "loading", "type": "boolean", "default": "false", "description": "Display loading icon of the button" }, { "name": "loadingIcon", "type": "any", "default": "null", "description": "Name of the loading icon or JSX.Element for loading icon." } ], "events": [] }, { "name": "Calendar", "source": { "module": "PrimeReact", "symbol": "Calendar" }, "description": "Calendar is a form component to work with dates.", "doc-url": "https://primefaces.org/primereact/showcase/#/calendar", "props": [ { "name": "id", "type": "string", "default": "null", "description": "Unique identifier of the element." }, { "name": "name", "type": "string", "default": "null", "description": "Name of the input element." }, { "name": "value", "type": "any", "default": "null", "description": "Value of the component." }, { "name": "visible", "type": "boolean", "default": "false", "description": "Specifies the visibility of the overlay." }, { "name": "viewDate", "type": "date", "default": "null", "description": "Date instance whose month and year are used to display the calendar." }, { "name": "style", "type": "string", "default": "null", "description": "Inline style of the element." }, { "name": "className", "type": "string", "default": "null", "description": "Style class of the element." }, { "name": "inline", "type": "boolean", "default": "false", "description": "When enabled, displays the calendar as inline instead of an overlay." }, { "name": "inputId", "type": "string", "default": "null", "description": "Identifier of the input element." }, { "name": "inputStyle", "type": "object", "default": "null", "description": "Inline style of the input element." }, { "name": "inputClassName", "type": "string", "default": "null", "description": "Style class of the input element." }, { "name": "required", "type": "boolean", "default": "false", "description": "When present, it specifies that an input field must be filled out before submitting the form." }, { "name": "readOnlyInput", "type": "boolean", "default": "null", "description": "When specified, prevents entering the date manually with keyboard." }, { "name": "keepInvalid", "type": "boolean", "default": "false", "description": "Keep invalid value when input blur." }, { "name": "mask", "type": "string", "default": "null", "description": "Mask pattern for input element." }, { "name": "disabled", "type": "boolean", "default": "false", "description": "When specified, disables the component." }, { "name": "tabIndex", "type": "number", "default": "null", "description": "Index of the element in tabbing order." }, { "name": "placeholder", "type": "string", "default": "null", "description": "Placeholder text for the input." }, { "name": "showIcon", "type": "boolean", "default": "false", "description": "When enabled, displays a button with icon next to input." }, { "name": "icon", "type": "string", "default": "pi pi-calendar", "description": "Icon of the calendar button." }, { "name": "showOnFocus", "type": "boolean", "default": "true", "description": "When disabled, datepicker will not be visible with input focus." }, { "name": "numberOfMonths", "type": "number", "default": "1", "description": "Number of months to display." }, { "name": "view", "type": "string", "default": "date", "description": "Type of view to display, valid valids are \"date\" for datepicker and \"month\" for month picker." }, { "name": "touchUI", "type": "boolean", "default": "false", "description": "When enabled, calendar overlay is displayed as optimized for touch devices." }, { "name": "showTime", "type": "boolean", "default": "false", "description": "Whether to display timepicker." }, { "name": "timeOnly", "type": "boolean", "default": "false", "description": "Whether to display timepicker only." }, { "name": "showSeconds", "type": "boolean", "default": "false", "description": "Whether to show the seconds in time picker." }, { "name": "showMillisec", "type": "boolean", "default": "false", "description": "Whether to show the milliseconds in time picker." }, { "name": "hourFormat", "type": "string", "default": "24", "description": "Specifies 12 or 24 hour format." }, { "name": "locale", "type": "string", "default": "en", "description": "Used to display the values ​​of the locale object defined in the Locale API" }, { "name": "stepHour", "type": "number", "default": "1", "description": "Hours to change per step." }, { "name": "stepMinute", "type": "number", "default": "1", "description": "Minutes to change per step." }, { "name": "stepSecond", "type": "number", "default": "1", "description": "Seconds to change per step." }, { "name": "stepMillisec", "type": "number", "default": "1", "description": "Milliseconds to change per step." }, { "name": "shortYearCutoff", "type": "string", "default": "+10", "description": "The cutoff year for determining the century for a date." }, { "name": "hideOnDateTimeSelect", "type": "boolean", "default": "false", "description": "Whether to hide the overlay on date selection when showTime is enabled." }, { "name": "showWeek", "type": "boolean", "default": "false", "description": "When enabled, calendar will show week numbers." }, { "name": "dateFormat", "type": "string", "default": "mm/dd/yy", "description": "Format of the date." }, { "name": "panelStyle", "type": "object", "default": "null", "description": "Inline style of the datetimepicker panel." }, { "name": "panelClassName", "type": "string", "default": "null", "description": "Style class of the datetimepicker panel." }, { "name": "monthNavigator", "type": "boolean", "default": "false", "description": "Whether the month should be rendered as a dropdown instead of text." }, { "name": "yearNavigator", "type": "boolean", "default": "false", "description": "Whether the year should be rendered as a dropdown instead of text." }, { "name": "disabledDates", "type": "array;", "default": "null", "description": "Array with dates to disable." }, { "name": "disabledDays", "type": "array", "default": "null", "description": "Array with disabled weekday numbers." }, { "name": "minDate", "type": "Date", "default": "null", "description": "The minimum selectable date." }, { "name": "maxDate", "type": "Date", "default": "null", "description": "The maximum selectable date." }, { "name": "maxDateCount", "type": "number", "default": "null", "description": "Maximum number of selectable dates in multiple mode." }, { "name": "showMinMaxRange", "type": "boolean", "default": "false", "description": "Whether to allow navigation past min/max dates." }, { "name": "showOtherMonths", "type": "boolean", "default": "true", "description": "Whether to display dates in other months (non-selectable) at the start or end of the current month. To make these days selectable use the selectOtherMonths option." }, { "name": "selectOtherMonths", "type": "boolean", "default": "false", "description": "Whether days in other months show