Skip to content

Instantly share code, notes, and snippets.

@tortillaj
tortillaj / useColumnCount.ts
Created Jan 28, 2019
React hook for setting column counts based on window size, useful for css grid
View useColumnCount.ts
import { useState, useEffect, useLayoutEffect } from 'react'
interface Point {
count: number;
width: number;
}
const throttle = (throttledFunction: Function, wait: number, context: void) : any => {
let timeoutId: any = null
let callbackArgs: any[] = []
View multiple-patron-context.js
import React from 'react'
import { api } from 'ducks/user'
const MultiplePatronContext = React.createContext({
isMultiplePatronEnabled: false,
error: '',
})
export class MultiplePatronProvider extends React.Component {
View recompose-functional-component-abstract.js
import {compose, setPropTypes, defaultProps, withHandlers, componentFromProp, setDisplayName} from 'recompose'
const componentEnhance = defaultProps({ component: 'button' })
const ButtonComponent = componentEnhance(componentFromProp('component'))
const enhance = compose(
setDisplayName(`Button`),
setPropTypes({
onClick: PropTypes.func,
type: PropTypes.oneOf(['submit', 'button']),
View recompose-function-component-withhandlers.js
import {compose, setPropTypes, defaultProps, withHandlers} from 'recompose'
const enhance = compose(
setPropTypes({
onClick: PropTypes.func,
type: PropTypes.oneOf(['submit', 'button']),
className: PropTypes.func,
children: PropTypes.func.isRequired,
isLoading: PropTypes.bool,
}),
View recompose-function-component.js
import {compose, setPropTypes, defaultProps} from 'recompose'
const enhance = compose(
setPropTypes({
onClick: PropTypes.func,
type: PropTypes.oneOf(['submit', 'button']),
className: PropTypes.func,
children: PropTypes.func.isRequired,
isLoading: PropTypes.bool,
}),
View function-component.js
export default const Button = ({ type, className, children, onClick, isLoading }) => {
return (
<button type={type} className={className} onClick={onClick}>
{isLoading && <Loading />}
{!isLoading && children}
</button>
)
}
@tortillaj
tortillaj / class-component.js
Last active Jan 18, 2018
React Recompose blog post
View class-component.js
export default class Button extends React.Component {
constructor(props) {
super(props)
this.state = {
isLoading: false,
}
}
static propTypes = {
onClick: PropTypes.func,
@tortillaj
tortillaj / Development Handbook.md
Created Jan 8, 2018
Guidelines for friendly programming
View Development Handbook.md
View .block
license: mit
scrolling: yes
border: no
View sm-annotated.html
<script type="text/javascript">
(function () {
"use strict";
// once cached, the css file is stored on the client forever unless
// the URL below is changed. Any change will invalidate the cache
var css_href = './index_files/web-fonts.css';
// a simple event handler wrapper
function on(el, ev, callback) {
if (el.addEventListener) {
el.addEventListener(ev, callback, false);