Skip to content

Instantly share code, notes, and snippets.

@bensampaio
bensampaio / DangerButton.jsx
Created June 18, 2020 14:56
Interview questions
// How to optimize this component?
class DangerButton extends PureComponent {
handleClick() {
throw new Error('I warned you!');
}
render() {
return (
<button onClick={this.handleClick.bind(this)}>
{"Don't press me!"}
@bensampaio
bensampaio / IFrame.jsx
Created January 7, 2020 12:35
Example of component method that performs an action when a form inside an iframe is submitted
class IFrame extends PureComponent {
// ...
bindEventsToFormsInIframe(iframeElement) {
const { contentDocument, contentWindow } = iframeElement;
jQuery(contentDocument).on('submit', '#account-form', () => {
jQuery(contentWindow).on('unload', () => {
// Dispatch redux action responsible for fetching and updating the account
dispatch({ type: 'FETCH_ACCOUNT' });
@bensampaio
bensampaio / IFrame.jsx
Last active January 7, 2020 12:30
Example of an iframe component that intercepts form submissions
class IFrame extends PureComponent {
// ...
getSnapshotBeforeUpdate(prevProps, prevState) {
const snapshot = {
hash: false,
redirect: false,
};
const { location: prevLocation } = prevProps;
@bensampaio
bensampaio / IFrame.jsx
Last active January 7, 2020 12:27
Example of an iframe component that intercepts form submissions (with bugs)
class IFrame extends PureComponent {
constructor(props) {
super(props);
this.iframeElement = React.createRef();
this.state = {
location: props.location,
};
@bensampaio
bensampaio / IFrame.jsx
Last active January 7, 2020 12:23
Example of an iframe component method that sets an iframe title as the current page title
class IFrame extends PureComponent {
// ...
setTitle(iframeElement) {
const { contentDocument } = iframeElement;
document.title = contentDocument.title;
}
// ...
@bensampaio
bensampaio / IFrame.jsx
Last active January 7, 2020 12:24
Example of an iframe component method that intercepts click, focus and mouse events on anchor elements
class IFrame extends PureComponent {
// ...
bindEventsToAnchorsInIFrame(iframeElement) {
const { history, location } = this.props;
const { contentDocument, contentWindow } = iframeElement;
const { jQuery } = contentWindow;
@bensampaio
bensampaio / IFrame.jsx
Last active January 7, 2020 12:25
Example of an iframe component method that intercepts click events on anchor elements
class IFrame extends PureComponent {
// ...
bindEventsToAnchorsInIFrame(iframeElement) {
const { history, location } = this.props;
const { contentDocument, contentWindow } = iframeElement;
const { jQuery } = contentWindow;
@bensampaio
bensampaio / IFrame.jsx
Last active January 7, 2020 12:21
Example of a basic IFrame component and respective configuration with react-router
class IFrame extends PureComponent {
constructor(props) {
super(props);
this.iframeElement = React.createRef();
this.handleLoad = this.handleLoad.bind(this);
}
handleLoad() {