Instantly share code, notes, and snippets.

View foo.jsx
import React from 'react'
import Component from "@reach/component-component"
const Fetch = ({ url, props }) => (
<Component
url={url}
initialState={{ data: null }}
didMount={({ setState }) => {
fetch(url)
.then(res => res.json())
View app.jsx
/////////////////////////////////
import React from "react"
import ReactDOM from 'react-dom'
let reducer = (state={count: 0}, action) => {
if (action.type === 'up') {
return {
...state,
count: state.count + 1
}
View foo.js
// Adds a lovely fade in of the modal
// and a gentle slide-down of the modal content
class Demo extends React.Component {
state = { showDialog: false };
render() {
return (
<div>
<button onClick={() => this.setState({ showDialog: true })}>
Show Dialog
</button>
View ManageScroll.js
import React from "react";
import { Location } from "@reach/router";
let scrollPositions = {};
class ManageScrollImpl extends React.Component {
componentDidMount() {
try {
// session storage will throw for a few reasons
// - user settings
View foo.js
const Auth = React.createContext()
class App extends React.Component {
state = {
auth: null
}
render() {
return this.state.auth ? (
<Auth.Provider value={this.state.auth}>
View index.js
const React = require("react");
const { renderToString } = require("react-dom/server");
const { ServerLocation, Router } = require("@reach/router");
let e = React.createElement;
let Home = () => e("div", null, "Heyooooooo");
let html = renderToString(
e(ServerLocation, { url: "/" }, e(Router, null, e(Home, { path: "/" })))
View foo.js
class Optimized extends React.PureComponent {
render() {
return this.props.children
}
}
const SomeConsumer = ({ slice, children } => (
<ActualConsumer>
{(state) => (
<Optimized slice={state[slice]}>
View foo.jsx
import Route from 'react-router/Route'
import React from 'react'
class FocusManager extends React.Component {
componentDidMount() {
this.focus()
}
componentDidUpate(prevProps) {
if (this.props.location !== prevProps.location) {
View App.js
import React, { Component } from "react";
import Nav from "./Nav";
import Channel from "./Channel";
import Login from "./Login";
import Authenticating from "./Authenticating";
import { firebase, provider, db, setupPresence } from "./firebase";
import { Router, Redirect } from "@reactions/router";
class App extends Component {
state = {
View Doc.js
import { db } from "./firebase";
import { Component } from "react";
const cache = {};
class Doc extends Component {
static propTypes = {
path: () => {}
};