React

MindFusion UI for React contains React functional wrapper components for controls from the @mindfusion/common-ui package / namespace. The components override core controls' DOM generation functions to generate React VDOM elements instead.

The React wrappers can be installed from the @mindfusion/ui-react package on npm:
npm i @mindfusion/ui-react

All wrapper components expose a forwardRef that can be passed on to other components. To obtain a reference to the underlying core control, use the respective find method of the ref, for example list1.current.find().

Properties and events defined by core controls can be set directly in JSX syntax:

JSX

<ListView
    id="list1" ref={list1}
    height="100%" theme="pastel"
    data={data}
    itemSize={common.Unit.pixel(20)}
    onSelectionChanged={(sender, args) => onSelectionChanged(sender, args)} >
</ListView>

Several often-used methods such as addItem, removeItem, and selectItem are defined in the wrapper components' API. Other methods must be called through the respective core control:

JSX

list1.current.addItem(<ListItem imageSrc={na} title="unknown"></ListItem>);
index = list1.current.find().items.indexOfItem(item);

Currently available components include:

ListView

The ListView component displays a collection of items, which can be arranged vertically or horizontally. Items can be static (defined as children in the JSX template) or dynamic (specified by the "data" property). List items can display text and/or an image, or a custom content, defined within a <template> JSX tag. The component's features include single and multiple selection and drag-and-drop.  The component's API allows adding, removing, selecting and deselecting items programmatically.

TreeView

The TreeView component displays a hierarchy of nodes. TreeView nodes can be static (defined as children in the JSX template) or dynamic (specified by the "data" property). Tree nodes can display text and/or an image, or a custom content, defined within a <template> JSX tag. The component's features include single and multiple selection, nodes expanding and collapsing, and drag-and-drop. The component's API allows adding, removing, selecting and deselecting tree nodes programmatically.

TabControl

The TabControl represents a container of windows, whose contents are displayed in the same area, and whose headers are displayed in a separate tab strip. The content of only one of the tabs in the TabControl is displayed at a time. Tab pages are defined as children in the JSX template, and their contents - within a <template> JSX tag. Tabs can be rearranged interactively by drag-and-drop. The component's API allows adding, removing, and changing the current tab programmatically.

ToolStrip

The ToolStrip component represents a container of toolbar buttons, which can be arranged vertically or horizontally. Items can be static (defined as children in the JSX template) or dynamic (specified by the "data" property). ToolStrip items can display text and/or an image, or a custom content, defined within a <template> JSX tag. ToolStrip items can be rearranged interactively by drag-and-drop. The component's API allows adding and removing items programmatically.