How to use react-confirm - 10 common examples

<div>
                    <button> this.props.proceed()}&gt;Yes</button>
                    <button> this.props.cancel()}&gt;No</button>
                </div>
            
        );
    }
}

// Adds ReactConfirmProps to CustomModal component
const ConfirmModal = confirmable(CustomModal);

// This is the function you need to call to open your modal, then you can use the
//   Promise object it returns to handle "proceed()" or "cancel()" functions.
const confirm = createConfirmation(ConfirmModal);

const markup = (
  <div>
    <b>Are you sure you want to delete this item?</b>
  </div>
);

// This is how you can detect what option ("Yes" or "No") the user has chosen.
confirm({ confirmation: markup })
  .then((result) =&gt; {
    // User chose "Yes"
  })
  .catch((result) =&gt; {
    // User chose "No"
  });

<div>
                    {this.props.confirmation}
                </div>

                <div>
                    <button> this.props.proceed()}&gt;Yes</button>
                    <button> this.props.cancel()}&gt;No</button>
                </div>
            
        );
    }
}

// Adds ReactConfirmProps to CustomModal component
const ConfirmModal = confirmable(CustomModal);

// This is the function you need to call to open your modal, then you can use the
//   Promise object it returns to handle "proceed()" or "cancel()" functions.
const confirm = createConfirmation(ConfirmModal);

const markup = (
  <div>
    <b>Are you sure you want to delete this item?</b>
  </div>
);

// This is how you can detect what option ("Yes" or "No") the user has chosen.
confirm({ confirmation: markup })
  .then((result) =&gt; {
    // User chose "Yes"
  })

import ExpansionPanel from '@material-ui/core/ExpansionPanel';
import ExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails';
import ExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary';
import ExpandMoreIcon from '@material-ui/icons/ExpandMore';

import IconButton from './IconButton';
import TrackBarChart from './TrackBarChart';
import DraggableIcon from '@material-ui/icons/DragIndicator';
import VolumeUpIcon from '@material-ui/icons/VolumeUp';
import VolumeOffIcon from '@material-ui/icons/VolumeOff';
import TrackControls from './TrackControls';

import trackTypes from './util/trackTypes';

const confirm = createConfirmation(ConfirmationDialog);

const styles = (theme) => ({
	root: {
		margin: theme.spacing.unit,
		display: 'flex'
	},
	expansionPanel: {
		flex: 1,

		// undo paper
		margin: 0,
		borderRadius: 0,
		boxShadow: 'none',
		backgroundColor: 'transparent',
		'&:first-child': {
			borderRadius: 0

import SpreadsheetIcon from '@material-ui/icons/List';
// import AudioMenuItem from './AudioMenuItem';
import Typography from '@material-ui/core/Typography';
import DeleteIcon from '@material-ui/icons/Delete';
import IconButton from './IconButton';
import ConfirmationDialog from './ConfirmationDialog';
import CheckIcon from '@material-ui/icons/Check';
import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import ListItemIcon from '@material-ui/core/ListItemIcon';
import ListItemText from '@material-ui/core/ListItemText';

import * as dataLibrary from '../assets/dataLibrary';
import parseSpreadSheet from '../util/data';

const confirm = createConfirmation(ConfirmationDialog);

const fileAcceptTypes = [
	'application/vnd.ms-excel',
	'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
	'application/vnd.oasis.opendocument.spreadsheet',
	'text/csv',
	'text/plain',
	'.ods',
	'.fods',
	'.txt',
	'.dsv',
	'.csv',
	'.xls',
	'.xlsx'
];
const fileAcceptTypeString = fileAcceptTypes.join(', ');

}
}

Confirmation.propTypes = {
  okLabbel: PropTypes.string,
  cancelLabel: PropTypes.string,
  title: PropTypes.string,
  confirmation: PropTypes.string,
  show: PropTypes.bool,
  proceed: PropTypes.func,     // called when ok button is clicked.
  cancel: PropTypes.func,      // called when cancel button is clicked.
  dismiss: PropTypes.func,     // called when backdrop is clicked or escaped.
  enableEscape: PropTypes.bool,
}

export default confirmable(Confirmation);

import Confirmation from '../components/Confirmation';
import ComplexConfirmation from '../components/ComplexConfirmation';
import { createConfirmation } from 'react-confirm';

const defaultConfirmation = createConfirmation(Confirmation);

export function confirm(confirmation, options = {}) {
  return defaultConfirmation({ confirmation, ...options });
}

export const confirmComplex = createConfirmation(ComplexConfirmation);

import Confirmation from 'components/Confirmation';
import { createConfirmation } from 'react-confirm';

const confirm = createConfirmation(Confirmation);

export default function(confirmation, options = {}) {
  return confirm({ confirmation, ...options });
}

import Confirmation from '../components/Confirmation';
import ComplexConfirmation from '../components/ComplexConfirmation';
import { createConfirmation } from 'react-confirm';

const defaultConfirmation = createConfirmation(Confirmation);

export function confirm(confirmation, options = {}) {
  return defaultConfirmation({ confirmation, ...options });
}

export const confirmComplex = createConfirmation(ComplexConfirmation);

import {createConfirmation} from "react-confirm";
import ConfirmModal from "./common/modal/ConfirmModal";

export const convertBr = text => {
    return text.replace(new RegExp("\n","gm"),"<br>");
};

const createConfirm = createConfirmation(ConfirmModal);

export const confirm = confirmation =&gt; {
    return createConfirm({
        confirmation : confirmation
    })
};

import withStyles from '@material-ui/core/styles/withStyles';

/*
Material UI components
*/
import Typography from '@material-ui/core/Typography';
import IconButton from './IconButton';
import EditIcon from '@material-ui/icons/Edit';
import HelpIcon from '@material-ui/icons/Help';
import DeleteIcon from '@material-ui/icons/DeleteForever';
import SpreadsheetIcon from '@material-ui/icons/List';
import ConfirmationDialog from './ConfirmationDialog';

import twoToneLogo from '../images/two-tone-logo.svg';

const confirm = createConfirmation(ConfirmationDialog);

const styles = theme => ({
	title: {
		flex: 1,
		display: 'flex',
		alignItems: 'center',
		overflow: 'hidden',
		'& > *': {
			display: 'flex'
		}
	},
	titleText: {
		overflow: 'hidden',
		textOverflow: 'ellipsis',
		whiteSpace: 'nowrap',
		cursor: 'pointer'