Skip to content

Instantly share code, notes, and snippets.

Frankie Bagnardi brigand

Block or report user

Report or block brigand

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
@brigand
brigand / .js
Created Dec 17, 2019
Concept for flexible pattern matching in ES6
View .js
import match, { matches, Instance, TypeOf, PropEq, Eq, Check, Index } from '@brigand/unnamed-match-thing';
// Simple matching.
// Note that this is an object literal, so all of these need to
// return something with a toString, and match needs to convert that
// back to the pattern. This implies we need to store Eq('production') in
// module level storage and somehow avoid leaking memory for every pattern ever used.
// Something every toString called here allocates the pattern, and when match() is called
// it can claim all patterns before it (since the toString calls run before match()), removing
// them from the global storage, and then execute the patterns.
@brigand
brigand / README.md
Last active Nov 14, 2019
A gist npm package for using @types/stripe-v3
View README.md

To install, add this gist as a dependency, and @types/stripe-v3 as a dev dependency.

yarn add --dev @types/stripe-v3
yarn add https://gist.github.com/955eafd92692f4ba54d50d447cef6327.git

Or with npm

@brigand
brigand / a.example.md
Last active May 28, 2019
A react hook for an enum-like interface to async data
View a.example.md

Simple example where .match is used to render in one of three states.

function User({ id }) {
  const state = usePromise(() => get('/api/user', { id }), [id]);
  
  return (
    <div className={css.root}>
      {state.match({
@brigand
brigand / .js
Last active Apr 11, 2019
react-router - clicking a link again refreshes data
View .js
import useReactRouter from 'use-react-router';
function UserPage({ match }) {
const [user, setUser] = React.useState(null);
const { history } = useReactRouter();
// If on /user/123 and you click a link to /user/123, history.length will be
// increased by 1, causing the effect to run again
React.useEffect(() => {
let cancel = false;
@brigand
brigand / 1.example.js
Last active Mar 26, 2019
The `useLocationState` hook gives a `React.useState`-like interface to updating the HTML5 History API location state.
View 1.example.js
function Foo() {
const [count, setCount] = useLocationState('Foo', 0);
return (
<div>
<button onClick={() => setCount(c => c + 1)}>Clicks: {count}</button>
<button onClick={() => setCount(0)}>Reset</button>
</div>
);
}
@brigand
brigand / example.js
Last active Feb 27, 2019
React Hook 'useDebounced' for debouncing event handlers
View example.js
function Foo({ onClick }) {
let handler = useDebounced(onClick, { delay: 1000, leading: true });
return <button onClick={handler}>Click me</button>;
}
View image.js
import React, { Component } from 'react';
import styled from 'styled-components';
const Figure = styled.figure`
height: 0;
margin: 0;
background-color: #efefef;
position: relative;
padding-bottom: ${props => props.ratio}%;
`;
@brigand
brigand / .md
Created Dec 30, 2018
Issues with the KM Resizer Tool (post here!)
View .md

Issues with the KM Resizer Tool

It's a tiny project, so please leave any error reports as comments here.

@brigand
brigand / .jsx
Created Nov 29, 2018
Accessible Custom Radio Input for React
View .jsx
const defaultItemRender = (props, active, children) => (
<FlexCol className={[s.label, active && s.active]} {...props}>
{children}
</FlexCol>
);
export default class RadioSet extends React.Component<Props> {
baseId = `Radio-${++idCounter}`;
@brigand
brigand / a.styled.jsx
Last active Nov 6, 2019
Basic implementation of !important styles for React
View a.styled.jsx
class Styled extends React.Component {
static counter = 1e9;
id = `__styled__${Styled.counter++}`;
componentDidMount() {
this.apply();
}
componentDidUpdate(prevProps, prevState) {
const anyChanged = Object.entries({
You can’t perform that action at this time.