Skip to content

Instantly share code, notes, and snippets.

Avatar

Henrik Wenz HaNdTriX

View GitHub Profile
@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 Apr 12, 2020
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
@HaNdTriX
HaNdTriX / toDataUrl.js
Last active Oct 31, 2018
Example of converting a file to a dataURL in ES6
View toDataUrl.js
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)
}))
You can’t perform that action at this time.