Action | Shortcut |
---|---|
Jump to the next open tab | ⌘ + Option + Right arrow |
⌘ + Option + Tab |
|
Jump to the previous open tab | ⌘ + Option + Left arrow |
⌘ + Option + Shift + tab |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const toDataURL = url => fetch(url) | |
.then(response => response.blob()) | |
.then(blob => new Promise((resolve, reject) => { | |
const reader = new FileReader() | |
reader.onloadend = () => resolve(reader.result) | |
reader.onerror = reject | |
reader.readAsDataURL(blob) | |
})) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React from 'react' | |
import Router from 'next/router' | |
import AppBarMD from 'material-ui/AppBar' | |
import Tabs, { Tab } from 'material-ui/Tabs' | |
const routes = [ | |
'/', | |
'/articles' | |
] |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React from 'react' | |
import Router from 'next/router' | |
const widthRoute = (Component) => { | |
return class extends React.Component { | |
componentDidMount() { | |
this.route = Router.route() | |
this.forceUpdate() | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React from 'react' | |
import Router from 'next/router' | |
const HistoryContext = React.createContext([]); | |
export class HistoryProvider extends React.Component { | |
state = { | |
history: [] | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React from 'react' | |
class App extends Component { | |
componentDidMount() { | |
// Subscribe here | |
} | |
componentWillUnmount() { | |
// Unsubscribe here | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { useEffect } from 'react' | |
function useClickOutside(ref, onClickOutside) { | |
useEffect(() => { | |
const handleClick = (event) => { | |
if (!ref.current || !ref.current.contains(event.target)) { | |
onClickOutside(event) | |
} | |
} | |
window.addEventListener('click', handleClick) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { useState } from 'react' | |
const useForceUpdate = () => { | |
const [, setState] = useState() | |
return setState | |
} | |
export default useForceUpdate |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { useContext } from 'react' | |
import { __RouterContext as RouterContext, matchPath } from 'react-router-dom' | |
export default function useRouter (options = {}) { | |
const context = useContext(RouterContext) | |
const location = options.location || context.location | |
const match = options.path | |
? matchPath(location.pathname, options) | |
: context.match |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { useRef, useEffect } from 'react' | |
/** | |
* This hook reduces the amount of rebindings. | |
* Use it when your props change a lot. | |
* | |
* @param {DomRef} targetRef The reference to the dom node | |
* @param {String} eventName The eventName you want to bind | |
* @param {Function} handler The actual event handler | |
*/ |