Skip to content

Instantly share code, notes, and snippets.

View will-wow's full-sized avatar

Will will-wow

View GitHub Profile
export const App: FunctionComponent = () => {
const [videoRef, status] = useWebcam();
{
/* Hooks... */
}
return (
<PredictionWrapper status="none">
{/* ... */}
@will-wow
will-wow / reactive.ts
Created January 26, 2020 04:39
RxJS functions with React Hooks
/* eslint-disable react-hooks/exhaustive-deps */
import React from "react";
export const useCombineLatest = <T extends any[], U>(
values: T,
f: (...values: T) => U
): U => {
return React.useMemo(() => f(...values), [f, ...values]);
};
@will-wow
will-wow / 01-countdown-react.jsx
Last active October 15, 2019 00:34
Svelte Contacts
import React, { useState } from "react"
const CountDown = () => {
const [count, setCount] = useState(0)
const remaining = 10 - count
const increment = () => {
if (remaining > 0) {
setCount(count + 1)
@will-wow
will-wow / big-grid-memo.js
Created July 23, 2019 00:11
Sample code for a blog post about Optimizing Performance in React 18.6
import React from "react";
const BigGrid = ({ number }) => {
...
};
export default React.memo(BigGrid);
@will-wow
will-wow / authors-active-author-test.js
Last active July 23, 2019 00:05
Sample code for a blog post about shallow-testing hooks
describe("given selected author", () => {
beforeEach(() => {
// Expect one more render loop of useEffect
mockUseEffect();
mockUseEffect();
// Trigger the select action
wrapper
.find("Author")
.first()
@will-wow
will-wow / react.code-snippets
Created May 21, 2019 17:31
VSCode Snippets for a React/Redux/Jest/Enzyme Project
{
"jest-component": {
"prefix": "jestcomponent",
"body": [
"import React from 'react';",
"import { shallow } from 'enzyme';",
"import $1 from '../$1';",
"",
"describe('$1', () => {",
" let props;",
@will-wow
will-wow / user-component1.jsx
Last active August 9, 2018 00:55
Using Elixir-Style Modules in JavaScript
import React from ‘react’;
import {userType, fullName} from ‘./user’;
const UserComponent = user => (
<div>Name: {fullName(user)}</div>
);
UserComponent.propTypes = {
user: userType
};
@will-wow
will-wow / average-triangle-1.js
Last active December 20, 2017 21:36
Easy pipeline debugging with curried console.log
import * as R from 'ramda';
const multiplySides = R.reduce(R.multiply, 1);
const divideByTwo = R.divide(2);
const averageTriangle = R.pipe(
R.map(multiplySides),
R.map(divideByTwo),
R.mean
);
@will-wow
will-wow / .tmux-osx.conf
Created July 25, 2017 00:27
Copying and Pasting with tmux 2.4+
# Unbind from non-macOS setup
unbind-key -T copy-mode-vi 'y'
# Copy now goes to macOS clipboard
bind-key -T copy-mode-vi 'y' send -X copy-pipe-and-cancel "reattach-to-user-namespace pbcopy"
@will-wow
will-wow / applicative_functors_cool.md
Last active June 12, 2017 15:41
Applicative Functors - Other Cool Stuff

Applicative Functors Part II

const

const x is a function that returns x for all inputs.

const :: a -> b -> a
const x _ = x

const 1 2 = 1
const 1 3 = 1