Skip to content

Instantly share code, notes, and snippets.

@goldhand
goldhand / resolveModuleFromLocations.js
Created Jan 1, 2019
Resolves a module given multiple locations.
View resolveModuleFromLocations.js
import * as R from 'ramda';
const resolveModuleFromLocation = R.curry((location, next) => {
try {
return require.resolve(location) && require(location);
} catch (err) {
if (next && err && err.code === 'MODULE_NOT_FOUND') {
return next();
}
}
View accessCorsNode.js
const accessCors = res => {
// Website you wish to allow to connect
res.setHeader('Access-Control-Allow-Origin', '*');
// Request methods you wish to allow
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
// Request headers you wish to allow
res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type');
@goldhand
goldhand / SlotChildren.jsx
Created Oct 20, 2018
Render React components and modules as web components
View SlotChildren.jsx
import * as React from 'react';
import {hot} from "react-hot-loader";
const slotChildren = (UnwrappedComponent, options = {}) => {
// enable hot reloading in each react tree
const Component = hot(options.module || module)(UnwrappedComponent);
const slotName = `slot-${options.name}`;
class SlotWrapper extends React.Component {
constructor(props) {
@goldhand
goldhand / Greet.jsx
Created Oct 19, 2018
React App into Web Component (proof of concept)
View Greet.jsx
import * as React from 'react';
import toWebComponent from './WebComponent';
const styles = {
greeting: {
color: 'green',
},
user: {
color: 'blue',
}
View blocks.css
* {
border: solid lightgray 1px !important;
}
/* blocks use solid border */
section, aside, nav {
border: solid green 1px !important;
}
div {
@goldhand
goldhand / react-snippets.cson
Created Jun 8, 2018
React snippets for Atom
View react-snippets.cson
'.source.js.jsx':
'ReactJS Component single unit test':
'prefix': 'comput'
'body': """
it('$1', () => {
const {output} = setup();
const expected = $2;
const actual = $3;
expect(actual).toEqual(expected);
});
@goldhand
goldhand / Break.jsx
Created Mar 2, 2018
Line break react component
View Break.jsx
/**
* @module {Function} components/Break
* @flow
*/
import * as React from 'react';
import {css} from 'emotion';
const style = css`
margin: 0;
padding: 0;
@goldhand
goldhand / DateDisplay.jsx
Created Mar 2, 2018
Display a Date object react component
View DateDisplay.jsx
/**
* Create a uniform appearance for date and time displays
* @module {Function} components/DateDisplay
* @flow
*/
import * as React from 'react';
import typeOf from 'ramda/src/type';
const createDateDisplay = (getDisplay: (Date) => string, name: string) => {
View protoOf.js
// gets the prototype function of an object so it can be called against a value
const protoOf = curry((Obj, method, value, ...args) =>
Obj.prototype[method].call(value, ...args));
View displayDate.js
/**
* Converts a Date or TimeStamp into a human readable format
* @module {Function} utils/displayDate
* @flow
*/
import memoizeWith from 'ramda/src/memoizeWith';
import identity from 'ramda/src/identity';
import pipe from 'ramda/src/pipe';
import ifElse from 'ramda/src/ifElse';
import useWith from 'ramda/src/useWith';
You can’t perform that action at this time.