Skip to content

Instantly share code, notes, and snippets.

View timc1's full-sized avatar

Tim timc1

View GitHub Profile

This emulate's vim's <C-e> and <C-y> for scrolling in VSCode using the macros extension.

scrolling vscode editor

  1. add the following to settings.json
"macros": {
  "scrollLineDownFaster": [
 "scrollLineDown",
import React from 'react'
import styled from '@emotion/styled'
type StatusType = 'error' | 'neutral' | 'success'
type State = {
isStatusShowing: boolean
status: string
type: StatusType
}
@timc1
timc1 / use-auth.js
Created June 10, 2019 00:20
React Context + Hooks + Firebase Authentication
import React from 'react'
import firebaseConfig from '../path/to/firebase-config'
import firebase from 'firebase/app'
import 'firebase/auth'
import FullPageLoading from '../path/to/full-page-loading'
AuthProvider.actions = {
setUser: 'SET_USER',
toggleLoading: 'TOGGLE_LOADING',
}
@timc1
timc1 / gist:f1547d1b37e69781e102c3dd88aca0d1
Created May 13, 2019 16:29
Yarn base eslint packages
yad @typescript-eslint/parser eslint-config-react-app eslint-plugin-jsx-a11y eslint-config-prettier eslint-plugin-react-hooks
@timc1
timc1 / use-dropzone.tsx
Last active January 10, 2024 19:01
A React hook that returns whether a file is being dragged into the document from the operating system and not from within the browser.
import React from 'react'
type DropzoneContextValue = {
isDragging: boolean
}
const DropzoneContext = React.createContext<DropzoneContextValue | undefined>(
undefined
)
import React from "react";
function isMobile() {
if (typeof document !== `undefined`) {
return "ontouchstart" in document.documentElement === true;
}
return false;
}
const mobile = isMobile();
@timc1
timc1 / focus-hook.js
Last active April 27, 2019 23:57
Simple hook to control of the flow of focus.
import React from "react"
export default function useFocus() {
const cachedElement = React.useRef(null)
const setFocusCache = () => (cachedElement.current = document.activeElement)
const setFocus = () =>
cachedElement.current ? cachedElement.current.focus() : {}
@timc1
timc1 / use-focus.js
Last active April 25, 2019 04:30
Simple hook using React Context API to give control of the flow of focus.
import React from 'react'
const FocusContext = React.createContext()
export function FocusProvider({ children }) {
const focusElement = React.useRef(null)
const cacheFocusElement = element => (focusElement.current = element)
const toggleFocus = () => {
@timc1
timc1 / freeze-window.js
Created April 24, 2019 02:15
Prevent overflow scrolling — nice to use when displaying a modal
const capturePosition = () => {
const cachedPosition = window.pageYOffset
return {
freeze: () => {
document.body.style =
`position: fixed;
top: ${cachedPosition * -1}px;
width: 100%;`
},
unfreeze: () => {
@timc1
timc1 / toggler-confirmation.js
Last active March 23, 2019 20:51
Wrap a button/link component with multi confirmation
import React from 'react'
export function WithConfirmation({ children }) {
const [hasConfirmed, setConfirm] = React.useState(false)
return children({
hasConfirmed,
setConfirm,
})
}