React components for @mindfusion/common-ui

This package contains functional component React wrappers for MindFusion UI controls. Currently available components include ListView, TreeView, TabControl and ToolStrip.

Installing

For the latest stable version:

npm install @mindfusion/ui-react

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

The React wrapperscan 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:

<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:

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

Documentation

• Detailed API Reference

Additional Information

Learn more about MindFusion UI controls for JavaScript from the official product page. Stay in touch with MindFusion about our latest product announcements, tutorials and programming guidelines via Twitter or our company blog.

Technical Support

• Forum
• E-mail
• Help desk

Licensing

The end-user license agreement for MindFusion UI for React is here.