i am trying to define a button ("Cancel") in React to close the whole react-app but not the Window?
<Button onClick={() => window.close()} className={buttonClassses.join(' ')} size="large" variant="contained" color="secondary"> {props.cancel}
What should i do instead of onClick={() => window.close()}?
This will close the tab of the browser but not the whole browser
window.open("about:blank", "_self"); window.close();
Hope it helps
Well yes its possible you can call this conditional rendering in which you need to do this on handle state.
in my code you can press esc button on which im handling a state which in App.js will render UI on the conditional base
please check the below code and for demo click here
After run demo click ESC button which toggle both UI
we know our react app start from index.js or app.js so we can close all the component in App.js and instead of that we can render some UI.
import React, { Component } from 'react';
export default class App extends Component {
constructor(props) {
super(props);
this.state = {
closeMyApp: true,
};
}
escFunction = (event) => {
if (event.keyCode === 27) {
this.setState({ closeMyApp: !this.state.closeMyApp });
}
};
componentDidMount() {
document.addEventListener('keydown', this.escFunction, false);
}
componentWillUnmount() {
document.removeEventListener('keydown', this.escFunction, false);
}
render() {
if (this.state.closeMyApp) {
return (
<div>
<h1>All App Componenet in this section</h1>
<p>App is runing!</p>
</div>
);
} else {
return (
<>
<h1>App is closed</h1>
<h3>You can set some UI here like</h3>
</>
);
}
}
}