Skip to content

Instantly share code, notes, and snippets.

@bultas
bultas / template.js
Last active June 20, 2017 14:32
Simple ES6 Template
var article = {
title: 'Hello Template Literals',
teaser: 'String interpolation is awesome. Here are some features',
body: 'Lots and lots of sanitized HTML',
tags: ['es6', 'template-literals', 'es6-in-depth']
}
function html(template, ...expressions) {
return template.reduce((accumulator, part, i) => {
return accumulator + expressions[i - 1] + part
@bultas
bultas / form.jsx
Last active August 4, 2017 18:53
Form in Redux
import { connect } from 'react-redux';
import { formsReducer, FormsActions, convertFormData, haveFormDataError } from 'forms';
const FORMS_REDUCER_ID = 'forms';
const store = createStore(formsReducer);
const dispach = store.dispach;
@bultas
bultas / fetchAndConnect.js
Created October 3, 2017 08:10
Redux FetchAndConnect
import React from 'react';
import { connect } from 'react-redux';
class FetchComponent extends React.Component {
constructor() {
super();
this.state = {
dataFetched: false
};
}
@bultas
bultas / validator-middleware-example.js
Last active October 4, 2017 14:50
Redux-Validator-Middleware
import { validator } from 'validator'
import { VALIDATOR_SYMBOL } from 'validator-middleware';
const data = { x: 1, y: 2 };
const validator = validator(fn1, fn2); // curry, one data input left
const action = {
[VALIDATOR_SYMBOL]: {
data,
@bultas
bultas / validate.js
Created October 25, 2017 10:46
Validate data usage
import { validate, list, dict, required, optional } from 'validators';
pipe(
validate(
identity,
[
required('first', isString),
optional('second', list(isString), []),
// required(['third', 'subParam', 'deepParam'], isNumber)
@bultas
bultas / children-as-function.js
Created November 20, 2017 15:44 — forked from iammerrick/children-as-function.js
Which API do you prefer? Passing a function into the Ratio component or making a higher order component called Ratio you can use to configure a component.
<Ratio width={Ratio.OPTIONS.FLUID} x={3} y={4}>
{(width, height) => (
<Chart id={this.props.id} width={width} height={height} />
)}
</Ratio>
@bultas
bultas / connect-as-child.js
Last active December 2, 2017 14:06
Redux Connect use like children-as-func instead of HOC
import React, { createElement } from 'react';
import { render } from 'react-dom';
import { Provider, connect } from 'react-redux';
import { store } from 'store';
const TypeConnector = connect(({ router: { type } }) => {
return {
type
};
@bultas
bultas / dynamic-react-redux.js
Last active December 2, 2017 14:57
Dynamic Redux Connectors in React App
import React, { createElement } from 'react';
import { createStore } from 'redux';
import { render } from 'react-dom';
import { Provider, connect } from 'react-redux';
const ADD = 'ADD';
const store = createStore((state = 0, action) => {
if (action.type === ADD) {
return ++state;
@bultas
bultas / fixNPM.sh
Last active February 6, 2018 11:06
If `NPM install` has spicy problems
rm -rf ./node_modules
npm cache clear --force
npm install
# If the problem persists
rm ./package-lock.json
rm -rf ./node_modules
npm cache clear --force
npm install
class Optimized extends React.PureComponent {
render() {
return this.props.children
}
}
const SomeConsumer = ({ slice, children } => (
<ActualConsumer>
{(state) => (
<Optimized slice={state[slice]}>