Skip to content

Instantly share code, notes, and snippets.

Avatar
🐛

DominicTobias

🐛
View GitHub Profile
@DominicTobias
DominicTobias / CSS.tsx
Last active Mar 9, 2020
Simple no-frills CSS-In-JSS in React
View CSS.tsx
/*
Why?
- Tiny compared to existing solutions
- No frills or stupid class hashing, just for portability of providing components with CSS included
- Discourage dynamism -> While the CSS will update if you pass in variables, `insertRule` is more
efficient for highly dynamic CSS. But highly dynamic CSS is a code smell. Conditional selectors and
CSS Variables can achieve most use cases whilst being far more performant.
*/
import { useRef, useEffect } from 'react';
@DominicTobias
DominicTobias / MyApp.jsx
Last active Sep 15, 2020
React CSS Theme
View MyApp.jsx
function MyApp({ theme }) {
const cssTheme = useMemo(() => makeCssTheme(theme, 'xx'), [theme]);
return (
<div style={cssTheme}>
{/*
Any component in here now has access to:
var(--xx-buttonPadding), var(--xx-background) etc.
*/}
</div>
@DominicTobias
DominicTobias / app.js
Last active Jan 29, 2020
App using useGlobalState
View app.js
export default function App() {
const [theme, dispatch] = useGlobalState(appState, state => state.theme);
return (
<div style={{ background: theme.background }}>
<button onClick={() => dispatch('toggleTheme')}>Toggle theme</button>
<p style={{ color: theme.text }}>
You're enjoying the {theme.name} theme
</p>
</div>
View appState.js
const darkTheme = {
name: 'dark',
background: 'black',
text: 'white',
}
const lightTheme = {
name: 'light',
background: 'white',
text: 'black',
View useGlobalState.js
function useGlobalState(globalState, stateGetter) {
const [state, setState] = useState(stateGetter(globalState.state));
// We don't want to re-create the listener as we want to unlisten on unmount
// of the component which uses this hook, so we "tunnel" the state in.
const stateRef = useRef(state);
stateRef.current = state;
const listener = useRef(nextState => {
const stateUpdate = stateGetter(nextState);
View GlobalState.js
class GlobalState {
state = {};
listeners = [];
constructor(reducer, initialState = {}) {
this.reducer = reducer;
this.state = initialState;
this.devTools = typeof window !== 'undefined' && window?.__REDUX_DEVTOOLS_EXTENSION__?.connect();
}
@DominicTobias
DominicTobias / swipeDetection.js
Last active Jan 20, 2020
Native JS swipe detection
View swipeDetection.js
let startX = 0;
let startY = 0;
function handleTouchStart(e) {
startX = e.changedTouches[0].screenX;
startY = e.changedTouches[0].screenY;
}
function handleTouchEnd(e) {
const diffX = e.changedTouches[0].screenX - startX;
@DominicTobias
DominicTobias / ResizeObserver.ts
Last active Jan 21, 2020
ResizeObserver type
View ResizeObserver.ts
declare global {
interface DOMRectReadOnly {
readonly x: number;
readonly y: number;
readonly width: number;
readonly height: number;
readonly top: number;
readonly right: number;
readonly bottom: number;
readonly left: number;
@DominicTobias
DominicTobias / useResizeObserver.js
Last active Jul 28, 2022
useResizeObserver hook for React
View useResizeObserver.js
import { useRef, useCallback, useEffect, useState } from 'react';
import { ResizeObserver as ResizeObserverPolyfill } from '@juggle/resize-observer';
const ResizeObserver = window.ResizeObserver || ResizeObserverPolyfill;
export default function useResizeObserver() {
const [size, setSize] = useState({ width: 0, height: 0 });
const resizeObserver = useRef(null);
const onResize = useCallback(entries => {
@DominicTobias
DominicTobias / setupProxy.js
Created Apr 1, 2019
setupProxy.js for http->https with cookies
View setupProxy.js
const proxy = require('http-proxy-middleware');
// Execute `copy(document.cookie)` in the console on the proxy site
// and paste into this string.
const cookies = '';
module.exports = function(app) {
app.use(proxy('/api', {
changeOrigin: true,
cookiePathRewrite: true,