Skip to content

Instantly share code, notes, and snippets.

@dlmanning
dlmanning / transducer.js
Last active April 28, 2022 21:28
tiny little transducer util made with universal-reduce
import reduce from 'universal-reduce'
const transduce = (put, initial) => (collection, ...xfs) =>
reduce(collection, (accum, value, key) =>
put(
accum,
key,
reduce(xfs, (result, xf) => xf(result), value)
),
initial
@dlmanning
dlmanning / branchDispatch.js
Last active December 18, 2015 19:21
dispatch keyed values to keyed functions
const branchDispatch = (obj, table, defaultFn) =>
Object.entries(obj)
.map(([key, value]) =>
table[key] != null
? [key, table[key](value)]
: typeof defaultFn === 'function'
? [key, defaultFn(value)]
: [key, undefined]
)
.reduce((results, [key, value]) => {
@dlmanning
dlmanning / checkbox.js
Last active December 17, 2015 02:28
A sample checkbox whose outerlayer is an instyled component
import React, { Component } from 'react'
import instyled, { flatKeyed } from 'instyled'
import cascade from 'cascade'
const CheckboxContainer = instyled(flatKeyed(cascade({
display: 'flex',
width: 'fit-content',
padding: 10,
borderRadius: 7,
background: 'gray',
@dlmanning
dlmanning / toolbar.js
Last active December 16, 2015 01:31
How I make react components without react
import Icon from 'react-fa'
import hoverable from 'lib/hocs/hoverable'
import instyled, { flatKeyed } from 'instyled'
import cascade from 'cascade'
export const EditButton = hoverable(
instyled(
flatKeyed(
cascade({
position: 'absolute',
@dlmanning
dlmanning / makeConnector.js
Last active November 20, 2015 22:33
Connect higher-order component from internal closure.
export function makeConnector (store) {
return function connect(mapStateToProps, mapDispatchToProps, mergeProps, options = {}) {
// same stuff
return function wrapWithConnect(WrappedComponent) {
return class Connect extends Component {
// same stuff
constructor(props) {
super(props)
this.store = props.store || store
// same stuff
@dlmanning
dlmanning / hoverable-hoc.js
Created November 7, 2015 19:07
Simple higher-order React component to make a compoent react to hover events.
function hoverable (WrappedComponent, propName = 'hover') {
return class HoverableComponent extends Component {
constructor (props) {
super(props)
this.state = { hovered: false }
}
turnHoverOn () {
this.setState({ hovered: true })
@dlmanning
dlmanning / does-not-work.jsx
Last active August 29, 2015 14:23
Why doesn't the spread operator work in JSX?
import { default as React, Component } from 'react';
function makeElements () {
return [
<h1>Hello</h1>,
<h1>World,</h1>,
<h1>How</h1>,
<h1>are</h1>,
<h1>you?</h1>
]
@dlmanning
dlmanning / classy.js
Last active August 29, 2015 14:21
classy and convenient
class Foo extends Bar () {
constructor () {
super();
this.bar = 'fubar';
}
}
export function FooFactory (...args) {
return new Foo(...args);
}
@dlmanning
dlmanning / webpack.config.js
Created May 9, 2015 17:20
My webpack config
const path = require('path');
module.exports = {
entry: './main.js',
output: {
publicPath: '/assets',
filename: 'bundle.js'
},
@dlmanning
dlmanning / app-working.jsx
Last active August 29, 2015 14:19
react-svg-flexbox
import React from 'react';
import { FlexContext, FlexBox } from 'flex';
const { Component } = React;
class Container extends Component {
render () {
console.log('Rendering Container');
return (
<g>