Skip to content

Instantly share code, notes, and snippets.

💭
daydreaming

Darryl Dexter DarrylD

💭
daydreaming
Block or report user

Report or block DarrylD

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
View SimpleReactRouterUpgrade.js
// In v2/3 you did this:
import ReactDOM from 'react-dom'
import { Router, browserHistory, Route } from 'react-router'
ReactDOM.render(
<Router>
<Route path="/about" component={About}/>
<Route path="/:username" component={User}/>
</Router>
)
View config.js
// File: .storybook/config.js
import { configure, addDecorator } from '@kadira/storybook';
import Theme from './../src/ui/theme';
import React from 'react';
import { ThemeProvider } from 'styled-components'
function loadStories() {
require('../stories');
}
@mjackson
mjackson / resolvePromise.js
Last active Sep 9, 2018
An easy way to do async APIs in JavaScript that support both promises *and* callbacks!
View resolvePromise.js
// Here is a function that I use all the time when creating public
// async APIs in JavaScript:
const resolvePromise = (promise, callback) => {
if (callback)
promise.then(value => callback(null, value), callback)
return promise
}
// Sometimes I like to use callbacks, but other times a promise is
@MicheleBertoli
MicheleBertoli / decribe.js
Created Sep 17, 2016
If all you have is a hammer, everything looks like a <Nail />
View decribe.js
import React, { PropTypes } from 'react'
const Describe = ({ title, children }) => (
<div>
<h1>{title}</h1>
<ul>{children}</ul>
</div>
)
Describe.propTypes = {
@deltaepsilon
deltaepsilon / rxjs-firebase-demo.js
Created Sep 8, 2016
Demo RxJs integration with Firebase
View rxjs-firebase-demo.js
var Rx = require('rxjs');
var firebase = require('firebase');
firebase.initializeApp({
"databaseURL": "https://quiver-two.firebaseio.com",
"serviceAccount": "./service-account.json"
});
var ref = firebase.database().ref('rxjs-demo');
Rx.Observable.fromPromise(ref.remove())
.map(function () {
View impure-action-creator.js
// Action creators can be impure.
export const addChat = ({
// cuid is safer than random uuids/v4 GUIDs
// see usecuid.org
id = cuid(),
msg = '',
user = 'Anonymous',
timeStamp = Date.now()
} = {}) => ({
type: ADD_CHAT,
@developit
developit / example.js
Last active Nov 26, 2019
Preact + Web Components = <333 Demo: http://www.webpackbin.com/VJyU9wK5W
View example.js
import { h, Component } from 'preact';
import Markup from 'preact-markup';
import register from './preact-custom-element';
// just a proxy component: WC -> Preact -> WC
const A = () => <x-b foo="initial foo from <x-a>" />;
// stateful component that can re-render
class B extends Component {
render(props, state) {
@tomkis
tomkis / redux-saga-confirmation-dialog.js
Last active Mar 14, 2019
Implementing confirmation dialog via redux-saga
View redux-saga-confirmation-dialog.js
import { select, put, take } from 'redux-saga/effects';
function* emptySaga() {}
export function* withConfirmation(text, onConfirm, onCancel = emptySaga) {
yield put({ type: 'ShowConfirmationDialog', payload: text });
const { type } = yield take([
'ConfirmationDialogConfirmed',
'ConfirmationDialogCanceled'
@thevangelist
thevangelist / my-component.spec.js
Created Aug 4, 2016
The only React.js component test you'll ever need (Enzyme + Chai)
View my-component.spec.js
import React from 'react';
import { shallow } from 'enzyme';
import MyComponent from '../src/my-component';
const wrapper = shallow(<MyComponent/>);
describe('(Component) MyComponent', () => {
it('renders without exploding', () => {
expect(wrapper).to.have.length(1);
});
View reduxSelectorPattern.md

Redux Selector Pattern

Imagine we have a reducer to control a list of items:

function listOfItems(state: Array<Object> = [], action: Object = {}): Array<Object> {
  switch(action.type) {
    case 'SHOW_ALL_ITEMS':
      return action.data.items
    default:
You can’t perform that action at this time.