Skip to content

Instantly share code, notes, and snippets.

Avatar

Esau Silva esausilva

View GitHub Profile
@pedronauck
pedronauck / useHotkeys.ts
Created Dec 11, 2018
usePopper and useHotkeys hooks
View useHotkeys.ts
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)
}
View index-sometimes-poly.js
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 (
View polyfills.js
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');
View create-hoc-from-render-prop.js
// 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
acdlite / coordinating-async-react.md
Last active Jan 19, 2021
Demo: Coordinating async React with non-React views
View coordinating-async-react.md

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?

@zenorocha
zenorocha / basic.md
Last active Mar 28, 2021
New Firebase Auth vs Old Firebase Auth
View basic.md
@jannecederberg
jannecederberg / formspree.html
Last active Jan 17, 2021 — forked from edmundojr/formspree.html
JS: Ajax send forms using the most excellent Formspree » http://formspree.io #snippet
View formspree.html
<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">
View react-lifecycle-parent-child.jsx
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: "" };
@edmundojr
edmundojr / formspree.html
Last active Jul 30, 2021
JS: Ajax send forms using the most excellent Formspree » http://formspree.io #snippet
View formspree.html
<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">