pedronauck

import { useEffect } from 'react'
import hotkeys from 'hotkeys-js'

export const useHotkeys = (key: string, cb: () => any, inputs?: any[]) => {
  useEffect(() => {
    hotkeys(key, cb)
    return () => hotkeys.unbind(key)
  }, inputs)
}

davidgilbertson

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App/App';
import './index.css';

const render = () => {
  ReactDOM.render(<App />, document.getElementById('root'));
}

if (

davidgilbertson

require('whatwg-fetch');
require('intl');
require('url-polyfill');
require('core-js/web/dom-collections');
require('core-js/es6/map');
require('core-js/es6/string');
require('core-js/es6/array');
require('core-js/es6/object');

kentcdodds

// handy method to create a Higher Order Component out of a
// Render Prop Component (like a Context.Consumer).
// handles, statics, displayName, refs, and value forwarding

function createHOCFromRenderProp({prop, Consumer}) {
  return Component => {
    function Wrapper(props, ref) {
      return (
        <Consumer>
          {value => <Component {...{...props, [prop]: value, ref}} />}

acdlite

Demo: Coordinating async React with non-React views

tl;dr I built a demo illustrating what it might look like to add async rendering to Facebook's commenting interface, while ensuring it appears on the screen simultaneous to the server-rendered story.

A key benefit of async rendering is that large updates don't block the main thread; instead, the work is spread out and performed during idle periods using cooperative scheduling.

But once you make something async, you introduce the possibility that things may appear on the screen at separate times. Especially when you're dealing with multiple UI frameworks, as is often the case at Facebook.

How do we solve this with React?

AimeeKnight

• Gecko Reflow Visualization
• css-stacking-contexts-wtf
• critical-rendering-path
• why-do-browsers-match-css-selectors-from-right-to-left
• getting-started-with-the-webkit-layout-code
• improving-css-performance-fixed-position-elements
• BlinkOn 5: Paint and Compositing Deep Dive
• a-quick-overview-of-chromes-rendering-path
• [render-blocking-css](https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-b

zenorocha

Basic Auth

• New docs
• Old docs

Create account

New API

jannecederberg

<form id="contact-form" action="//formspree.io/your@email.com" method="post">
	<input type="text" name="Name" placeholder="Name" required>
	<input type="email" name="Email" placeholder="Email" required>
	<textarea name="Message" cols="30" rows="6" placeholder="Message" required></textarea>
	<!-- CONFIG -->
	<input class="is-hidden" type="text" name="_gotcha">
	<input type="hidden" name="_subject" value="Subject">
	<input type="hidden" name="_cc" value="email@cc.com">
	<!-- /CONFIG -->
	<input class="submit" type="submit" value="Send">

fay-jai

import React from "react";
import { render } from "react-dom";

const ParentComponent = React.createClass({
  getDefaultProps: function() {
    console.log("ParentComponent - getDefaultProps");
  },
  getInitialState: function() {
    console.log("ParentComponent - getInitialState");
    return { text: "" };

manfromanotherland

<form id="contact-form" action="//formspree.io/your@email.com" method="post">
	<input type="text" name="Name" placeholder="Name" required>
	<input type="email" name="Email" placeholder="Email" required>
	<textarea name="Message" cols="30" rows="6" placeholder="Message" required></textarea>
	<!-- CONFIG -->
	<input class="is-hidden" type="text" name="_gotcha">
	<input type="hidden" name="_subject" value="Subject">
	<input type="hidden" name="_cc" value="email@cc.com">
	<!-- /CONFIG -->
	<input class="submit" type="submit" value="Send">