Skip to content

Instantly share code, notes, and snippets.

Rick Jolly approots

Block or report user

Report or block approots

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
View 0 basics.md

A series of posts on css-in-js

0. styles as objects

First, an exercise. Can we represent all of css with plain data? Let's try.

let redText = { color: 'red' };
@alexvcasillas
alexvcasillas / github-store.js
Created May 4, 2017
Async Fetching with MobX Actions
View github-store.js
import fetch from 'node-fetch';
import { observable, action, runInAction } from 'mobx';
export default class GithubStore {
@observable searchName;
@observable user;
@observable repos;
@observable fetchingData;
constructor() {
View App.js
import React, { Component } from 'react'
import logo from './logo.svg'
import './App.css'
import { Route, Link, Redirect } from './Zero'
const paths = [ 'one', 'two', 'three' ]
class App extends Component {
render() {
View gist:1eefcafc223c704077e441981f0f0939
<script>
window.Promise || document.write('<script src="https://unpkg.com/es6-promise@3.2.1/dist/es6-promise.min.js"><\/script>');
window.fetch || document.write('<script src="https://unpkg.com/whatwg-fetch@1.0.0/fetch.js"><\/script>');
</script>
@mikechau
mikechau / video.jsx
Last active Mar 11, 2019
videojs react component
View video.jsx
var React = require('react');
var cx = require('classnames');
var vjs = require('video.js');
var _forEach = require('lodash/collection/forEach');
var _debounce = require('lodash/function/debounce');
var _defaults = require('lodash/object/defaults');
var DEFAULT_HEIGHT = 800;
var DEFAULT_WIDTH = 600;
var DEFAULT_ASPECT_RATIO = (9 / 16);
@jquense
jquense / 0. intro.md
Last active May 29, 2019
Alternative ways to define react Components
View 0. intro.md

The 0.13.0 improvements to React Components are often framed as "es6 classes" but being able to use the new class syntax isn't really the big change. The main thing of note in 0.13 is that React Components are no longer special objects that need to be created using a specific method (createClass()). One of the benefits of this change is that you can use the es6 class syntax, but also tons of other patterns work as well!

Below are a few examples creating React components that all work as expected using a bunch of JS object creation patterns (https://github.com/getify/You-Dont-Know-JS/blob/master/this%20&%20object%20prototypes/ch4.md#mixins). All of the examples are of stateful components, and so need to delegate to React.Component for setState(), but if you have stateless components each patterns tends to get even simpler. The one major caveat with react components is that you need to assign props and context to the component instance otherwise the component will be static. The reason is

@dgraham
dgraham / fetch.js
Last active Jul 14, 2019
Simple window.fetch wrapper.
View fetch.js
(function() {
function status(response) {
if (response.ok) {
return response
} else {
var error = new Error(response.statusText || response.status)
error.response = response
throw error
}
}
@zxbodya
zxbodya / S3-CORS-config.xml
Last active Aug 3, 2019
Client side uploads to s3, with pre-signed upload form (PHP/JS)
View S3-CORS-config.xml
<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>PUT</AllowedMethod>
<AllowedMethod>POST</AllowedMethod>
<AllowedMethod>GET</AllowedMethod>
<AllowedMethod>HEAD</AllowedMethod>
<MaxAgeSeconds>3000</MaxAgeSeconds>
<AllowedHeader>*</AllowedHeader>
@ericflo
ericflo / reactdropzone.js
Last active Sep 15, 2016
ReactDropzone, a react component for interfacing with http://www.dropzonejs.com/
View reactdropzone.js
/** @jsx React.DOM */
var ReactDropzone = React.createClass({
componentDidMount: function() {
var options = {};
for (var opt in Dropzone.prototype.defaultOptions) {
var prop = this.props[opt];
if (prop) {
options[opt] = prop;
continue;
You can’t perform that action at this time.