HaNdTriX

// 🤫The following code is experimental and might break in the future! 
// Don't use it if you are using some kind of side-effect patterns like: Helmet, GraphQL or react-side-effect. 

import { useRouter } from 'next/router'

function Home() {
  const {
    // `String` of the actual path (including the query) shows in the browser
    asPath,
    // `String` Current route

HaNdTriX

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
 */

HaNdTriX

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

HaNdTriX

import { useState } from 'react'

const useForceUpdate = () => {
  const [, setState] = useState()
  return setState 
}

export default useForceUpdate

HaNdTriX

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)

HaNdTriX

import React from 'react'

class App extends Component {
  componentDidMount() {
    // Subscribe here
  }
  
  componentWillUnmount() {
    // Unsubscribe here
  }

HaNdTriX

import React from 'react'
import Router from 'next/router'

const HistoryContext = React.createContext([]);

export class HistoryProvider extends React.Component {
  state = {
    history: []
  }

HaNdTriX

import React from 'react'
import Router from 'next/router'

const widthRoute = (Component) => {
  return class extends React.Component {
    componentDidMount() {
      this.route = Router.route()
      this.forceUpdate()
    }

HaNdTriX

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'
]

HaNdTriX

Shortcuts

Mac

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