brigand

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

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

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

function Foo({ onClick }) {
  let handler = useDebounced(onClick, { delay: 1000, leading: true });
  
  return <button onClick={handler}>Click me</button>;
}

brigand

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

Issues with the KM Resizer Tool

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

brigand

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

class Styled extends React.Component {
  static counter = 1e9;
  id = `__styled__${Styled.counter++}`;

  componentDidMount() {
    this.apply();
  }

  componentDidUpdate(prevProps, prevState) {
    const anyChanged = Object.entries({

brigand

/*
  Example action:
  {
    type: 'MY_API',
    payload: {
      method: 'POST',
      path: 'foo/:userId',
      params: { userId: '123' },
      query: { my_query: 1 },
      body: { my_body: 2 },

brigand

Input Code

Looks like mostly normal JS code. It keeps a stack of names for each time .__sub__ctx__ is called. The output of this program is "value: 10, stack: foo->bar->baz".

You could use this technique to e.g. pass a log function around that's specific to an HTTP request, or a database client, or implement a hierarchy of event emitters.

function makeCtx() {
  'disable ctx';