Data Binding

The SplitButton enables you to bind it to array of strings, an array of objects, or SpllitButtonItem child components.

Arrays of Strings

The following example demonstrates how to bind the SplitButton to an array of strings.

class App extends React.Component {
    render() {
        return (
            <div>
                <SplitButton items={['Save as', 'Upload to drive']} text="Save" />
            </div>
        );
    }
}
ReactDOM.render(
    <App />,
    document.querySelector('my-app')
)

Arrays of Objects

When the SplitButton is bound to an array of objects, the component extracts the text value from the data items and, in this way, sets the text of the items in the popup. If the text field in the data objects is named text, the component gets its value automatically. However, if the name of the property in the data source is different—for example, actionText—you have to set it to the textField property of the SplitButton.

For a list of all fields the items model uses, refer to the article on the ButtonItem configuration.

const items=[{
        actionName: 'Keep Text Only', icon: 'paste-plain-text',
    }, {
        actionName: 'Paste as HTML', icon: 'paste-as-html'
    }, {
        actionName: 'Paste Markdown', icon: 'paste-markdown'
    }, {
        actionName: 'Set Default Paste'
}];
class App extends React.Component {
    render() {
        return (
            <div>
                <SplitButton textField="actionName" items={items} text="Paste" />
            </div>
        );
    }
}
ReactDOM.render(
    <App />,
    document.querySelector('my-app')
)

Child Components

The following example demonstrates how to use SplitButtonItem child components to populate the popup items.

class App extends React.Component {
    render() {
        return (
            <div>
                <SplitButton text="Paste">
                    <SplitButtonItem text="Keep Text Only" icon="paste-plain-text" />
                    <SplitButtonItem text="Paste as HTML" icon="paste-as-html" />
                    <SplitButtonItem text="Paste Markdown" icon="paste-markdown" />
                    <SplitButtonItem text="Set Default Paste" />
                </SplitButton>
            </div>
        );
    }
}
ReactDOM.render(
    <App />,
    document.querySelector('my-app')
)
 /