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({
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({
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; |
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> | |
); | |
} |
function Foo({ onClick }) { | |
let handler = useDebounced(onClick, { delay: 1000, leading: true }); | |
return <button onClick={handler}>Click me</button>; | |
} |
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}%; | |
`; |
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}`; |
class Styled extends React.Component { | |
static counter = 1e9; | |
id = `__styled__${Styled.counter++}`; | |
componentDidMount() { | |
this.apply(); | |
} | |
componentDidUpdate(prevProps, prevState) { | |
const anyChanged = Object.entries({ |
/* | |
Example action: | |
{ | |
type: 'MY_API', | |
payload: { | |
method: 'POST', | |
path: 'foo/:userId', | |
params: { userId: '123' }, | |
query: { my_query: 1 }, | |
body: { my_body: 2 }, |
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';