gillkyle

/* removes content from page layout but keeps information available to accessibility APIs */
.visually-hidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;

sophiebits

const {useCallback, useEffect, useReducer, useRef} = require('react');

let effectCapture = null;

exports.useReducerWithEmitEffect = function(reducer, initialArg, init) {
  let updateCounter = useRef(0);
  let wrappedReducer = useCallback(function(oldWrappedState, action) {
    effectCapture = [];
    try {
      let newState = reducer(oldWrappedState.state, action.action);

osv

import { connect, FormikContext, getIn } from 'formik';
import * as React from 'react';

import { useEffectWhenCountIncremented } from './reactHooks';

import { PageContext } from './context';

const FormikGotoErrorOnSubmitEffectFn: React.FunctionComponent<{
  formik?: FormikContext<any>;
}> = ({ formik }) => {

jquense

const { utils } = require('react-docgen');
const { default: resolveHOC } = require('react-docgen/dist/utils/resolveHOC');
const {
  default: resolveToModule,
} = require('react-docgen/dist/utils/resolveToModule');

module.exports = ({ moduleName = 'styled-components' } = {}) => {
  const isStyledExpression = (tagPath, t) =>
    (t.CallExpression.check(tagPath.node) &&
      tagPath.get('callee').node.name === 'styled') ||

mwickett

import React from 'react'
import { withRouter, Link } from 'react-router-dom'
import { graphql, compose } from 'react-apollo'
import { Formik } from 'formik'
import Yup from 'yup'

import FormWideError from '../elements/form/FormWideError'
import TextInput from '../elements/form/TextInput'
import Button from '../elements/form/Button'
import { H2 } from '../elements/text/Headings'

bvaughn

React lifecycle cheatsheet

Method	Side effects1	State updates2	Example uses
Mounting
componentWillMount		✓	Constructor equivalent for createClass
render			Create and return element(s)
componentDidMount	✓	✓	DOM manipulations, network requests, etc.
Updating
componentWillReceiveProps		✓	Update state based on changed props

acdlite

// getComponent is a function that returns a promise for a component
// It will not be called until the first mount
function asyncComponent(getComponent) {
  return class AsyncComponent extends React.Component {
    static Component = null;
    state = { Component: AsyncComponent.Component };

    componentWillMount() {
      if (!this.state.Component) {
        getComponent().then(Component => {

tj

let rows = {}

export default function(props = [], state = []) {
  return function(target) {
    const proto = Object.create(target.prototype)

    proto.shouldComponentUpdate = function(newProps, newState) {
      let id = (this._update_id = this._update_id || Math.random())

fson

This is a proposal for a lightning talk at the Reactive 2015 conference.

NOTE: If you like this, star ⭐ the Gist - the amount of stars decides whether it makes the cut!

Rapid prototyping with Relay

Relay makes data fetching in React apps simpler, by letting you declare the data needs of your components instead of writing complex imperative code. React, Relay, GraphQL and the other complementary tools are changing how apps are built.

justinwoo

import React from 'react';

/**
 * Counter.js
 *
 * exposes:
 *   init
 *   update
 *   view
 */