Skip to content

Instantly share code, notes, and snippets.

Henrik Wenz HaNdTriX

Block or report user

Report or block HaNdTriX

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
View UseRouterExample.next.js
// 🤫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
HaNdTriX / useCachedRefHandler.js
Last active Mar 10, 2019
React hook for reducing the amount of ref event bindings
View useCachedRefHandler.js
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
HaNdTriX / hooks-useRouter.js
Last active Feb 6, 2019
React-Router hooks usage
View hooks-useRouter.js
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
HaNdTriX / hooks-useForceUpdate.js
Last active Jan 29, 2019
Force update hook for react.js
View hooks-useForceUpdate.js
import { useState } from 'react'
const useForceUpdate = () => {
const [, setState] = useState()
return setState
}
export default useForceUpdate
View hooks-clickOutside.js
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)
View react-subscribe.js
import React from 'react'
class App extends Component {
componentDidMount() {
// Subscribe here
}
componentWillUnmount() {
// Unsubscribe here
}
View NextHistoryContext.jsx
import React from 'react'
import Router from 'next/router'
const HistoryContext = React.createContext([]);
export class HistoryProvider extends React.Component {
state = {
history: []
}
@HaNdTriX
HaNdTriX / withRoute.js
Created Jul 19, 2017
next.js withRoute hoc
View withRoute.js
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
HaNdTriX / AppBarWithTabs.js
Last active Sep 27, 2018
Example next.js and Material-UI next: TabNav with shared state
View AppBarWithTabs.js
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'
]
View shortcuts.md

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
You can’t perform that action at this time.