Skip to content

Instantly share code, notes, and snippets.

Richard Scarrott richardscarrott

Block or report user

Report or block richardscarrott

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
@richardscarrott
richardscarrott / Button.jsx
Last active Mar 8, 2018
React Component Design
View Button.jsx
const Button = ({ tagName: TagName = 'button', ...rest }) => <TagName className="button" {...rest} />;
const App = () => {
return (
<>
<Button onClick={() => console.log('clicked')}>renders HTMLButtonElement (default)</Button>
<Button tagName="a" href="http://google.com">renders HTMLAnchorElement (for functional purposes)</Button>
<Button tagName="h3">renders HTMLHeadingElement (for weird SEO purposes)</Button>
</>
);
@richardscarrott
richardscarrott / index.html
Last active Jun 29, 2017
iOS body scroll rubber banding bug
View index.html
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<style>
* {
@richardscarrott
richardscarrott / react-loadable
Created Apr 3, 2017
react-loadable flushModuleIds / flushServerSideRequires
View react-loadable
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
exports.default = Loadable;
@richardscarrott
richardscarrott / !react-enzyme-render-methods.md
Last active Aug 13, 2018
react-enzyme - `shallow` vs `mount` vs `render` lifecycle methods
View !react-enzyme-render-methods.md

An exploration of the different render methods available in react-enzyme.

View add.js
function add(val = 0, ...args) {
let sum = args.reduce((prev, curr) => {
return prev + curr;
}, val);
let ret = add.bind(this, sum);
ret.value = () => sum;
ret.add = ret;
return ret;
}
View events.js
const EventEmitter = require('events');
const myEmitter = new EventEmitter();
function handler1() {
console.log('first handler');
myEmitter.removeListener('event', handler2);
}
function handler2() {
View validators.js
'use strict';
/**
* Validators are functions accepting `state` and `prop` where `state` is an object
* containing the entire form state, e.g. `{ email: 'email', password: 'password' }`
* and `prop` refers to the property on `state` to be validated.
*
* Validators are expected to return a falsy value if valid and a truthy value if
* invalid. This is to allow information re: the error to be returned. e.g.
*
@richardscarrott
richardscarrott / NetworkError.js
Created Jan 11, 2016
Wrapper around `window.fetch`
View NetworkError.js
'use strict';
// http://stackoverflow.com/questions/31089801/extending-error-in-javascript-with-es6-syntax
class ExtendableError extends Error {
constructor(message) {
super();
this.message = message;
this.stack = (new Error()).stack;
this.name = this.constructor.name;
}
@richardscarrott
richardscarrott / Header1.css
Last active Dec 15, 2015
Typography React Component -- React header component with margin prop corrected for line-height
View Header1.css
/* $margin-large: 28px === desired margin from baseline. */
/* $margin-medium: 16px === desired margin from baseline. */
/* $margin-small: 8px === desired margin from baseline. */
.base {
/* line-height adds 16px(!) to bottom of heading */
line-height: 1.5;
font-size: 40px;
}
You can’t perform that action at this time.