Skip to content

Instantly share code, notes, and snippets.

View chrisregner's full-sized avatar

Christopher Regner chrisregner

View GitHub Profile
import React from "react";
import PropTypes from "prop-types";
import styled from "styled-components";
import debounce from "lodash/debounce";
class OverflowShadow extends React.Component {
state = { scrollPos: null }
componentDidMount = () => {
const el = this.containerRef.current
const customisableStyledComponents = (componentFactory, defaultStyledCmpts) =>
(overrideStyledCmpts = {}) => {
const customisedCmpts = Object.entries(overrideStyledCmpts)
.map(([componentName, customiseCmptFn]) =>
[componentName, customiseCmptFn(defaultStyledCmpts[componentName])])
.reduce((acc, [k, v]) =>
({ ...acc, [k]: v }), {});
const mergedComponents = { ...defaultStyledCmpts, ...customisedCmpts };
return componentFactory(mergedComponents);
@chrisregner
chrisregner / testSubComponents.js
Last active May 8, 2018 20:30
A function which greatly reduces the boilerplate when testing the inner structure of a React component given a certain set of props/state. It uses Enzyme and Chai's assert (can be replaced with any other assertion library)
import { assert } from 'chai'
import { curry, forEachObjIndexed } from 'ramda'
const find = (wrapper, matcher) =>
wrapper.findWhere(x =>
x.prop('data-test') &&
x.prop('data-test')
.trim()
.split(' ')
.includes(matcher)
@chrisregner
chrisregner / Map.js
Created September 7, 2017 10:45
My attempt at replicating a tutorial's (https://bost.ocks.org/mike/leaflet/) example with a world map and TopoJson.
import React from 'react'
import styled from 'styled-components'
import L from 'leaflet'
import d3 from 'services/d3'
import * as topojson from 'topojson-client'
import 'leaflet/dist/leaflet.css'
/*===========================================================
= Leaflet assets importing issues fix =