React ActionSheet - Overview

The ActionSheet UI component is a sheet containing a set of buttons located one under the other. These buttons usually represent several choices relating to a single task.

View Demo

The following code adds a simple ActionSheet to your page. The UI component is shown on a button click.

  • import React from 'react';
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import { ActionSheet } from 'devextreme-react/action-sheet';
  • import { Button } from 'devextreme-react/button';
  • import notify from "devextreme/ui/notify";
  •  
  • class App extends React.Component {
  • constructor(props) {
  • super(props);
  • this.state = { isActionSheetVisible: false };
  • this.showActionSheet = this.showActionSheet.bind(this);
  • this.processClick = this.processClick.bind(this);
  • this.actionSheetData = [
  • { text: "Reply", onClick: () => { this.processClick("Reply") } },
  • { text: "Reply All", onClick: () => { this.processClick("Reply All") } },
  • { text: "Forward", onClick: () => { this.processClick("Forward") } },
  • { text: "Delete", onClick: () => { this.processClick("Delete") } }
  • ];
  • }
  •  
  • processClick(name) {
  • notify(name + " clicked", "success", 3000);
  • this.setState({ isActionSheetVisible: false });
  • }
  •  
  • showActionSheet() {
  • this.setState({ isActionSheetVisible: true });
  • }
  •  
  • render() {
  • return (
  • <div>
  • <ActionSheet
  • visible={this.state.isActionSheetVisible}
  • dataSource={this.actionSheetData}
  • />
  • <Button
  • text="Show the ActionSheet"
  • onClick={this.showActionSheet}
  • />
  • </div>
  • );
  • }
  • }
  •  
  • export default App;

Note that every data source object has a text field that is rendered on the buttons of the ActionSheet. Also, there is the onClick field that represents a click handler for a certain ActionSheet button.

See Also