GA-MO / react-confirm-alert

react component confirm dialog.
https://ga-mo.github.io/react-confirm-alert/demo/
MIT License
272 stars 105 forks source link

Change animation #15

Closed jesper-bylund closed 5 years ago

jesper-bylund commented 5 years ago

It'd be great if the animation was also exposed.

GA-MO commented 5 years ago

@raelmiu You can use any animation lib for making the animation with custom UI. Example with react-spring https://stackblitz.com/edit/react-khs21r

import { Spring } from 'react-spring/renderprops'
const Confirm = ({ onClose }) => (
  <Spring
    from={{
      transform: 'translate3d(0,-400px,0) scale(2)'
    }}
    to={{
      transform: 'translate3d(0,0px,0) scale(1)'
    }}
  >
    {props => (
      <div style={props} className='custom-ui'>
        <h1>Are you sure?</h1>
        <p>You want to delete this file?</p>
        <button onClick={onClose}>No</button>
        <button onClick={onClose}>
          Yes, Delete it!
        </button>
      </div>
    )}
  </Spring>
)

class App extends Component {
  submit = () => {
    confirmAlert({
      customUI: Confirm
    });
  };

  render() {
    return (
      <div className='container'>
        <button onClick={this.submit}>Confirm dialog</button>
      </div>
    );
  }
}