Skip to content

Instantly share code, notes, and snippets.

View eiriklv's full-sized avatar

Eirik L. Vullum eiriklv

View GitHub Profile
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@eiriklv
eiriklv / Router.tsx
Created April 15, 2023 00:24
React router
import { History, Location } from "history";
import { MatchResult } from "path-to-regexp";
import { ReactElement, useContext, useEffect, useState } from "react";
import React from "react";
import { getPathMatch } from "./utils/routing";
export interface RouterContextInterface {
history?: History;
location?: Location;
basePath: string;
@eiriklv
eiriklv / component-using-mixin.js
Last active June 4, 2019 09:09
React Masonry Mixin Example
/** @jsx React.DOM */
'use strict';
var React = require('react');
var MasonryMixin = require('./react-masonry-mixin.js');
var masonryOptions = {
transitionDuration: 0
@eiriklv
eiriklv / create-reconnecting-websocket.js
Last active March 9, 2019 14:14
Channels and websockets
/**
* Import dependencies
*/
const { EventEmitter } = require('events');
const ReconnectingWebSocket = require('reconnecting-websocket');
/**
* Export a function that creates a websocket connection interface
*/
export default function createReconnectingWebsocket(uri) {
@eiriklv
eiriklv / avoiding-exceptions.js
Last active February 2, 2019 12:13
Exception free JavaScript?
/**
* WHY? - BECAUSE EXCEPTIONS/TRY/CATCH IS A GLOBAL HORRIBLE MESS :-(
* Check out error handling in golang: https://blog.golang.org/error-handling-and-go
*/
/**
* Wrap an "unsafe" promise
*/
function safePromise(promise) {
return promise
@eiriklv
eiriklv / App.css
Last active October 27, 2018 14:44
Idiomatic React and Redux
.App {
text-align: center;
}
.App-logo {
animation: App-logo-spin infinite 20s linear;
height: 10vmin;
}
.App-header {
@eiriklv
eiriklv / a.js
Last active September 20, 2018 07:23
Instance method anti-pattern
/**
* Instance method anti pattern
*/
class MyComponent extends React.Component {
computeThatThing() {
return this.props.a + this.props.b;
}
render() {
return (
@eiriklv
eiriklv / conventions.md
Created September 20, 2018 06:55
Component class conventions

React Conventions

  • Method ordering
  • PropTypes + DefaultProps
  • Destructuring from props and state (intent)
  • Avoid instance methods (only for things that matters to React)
  • Components > render methods (renderElements/renderItems/etc)
  • Pure render function (no window or Math.random())
  • Containers (connected) vs. Presentational Components (pure)
@eiriklv
eiriklv / seatbelt.js
Last active August 22, 2018 12:16
Seatbelts on!
const { log } = console;
const Undefined = new Proxy(function() {}, {
get(target, key, receiver) {
if (key === 'name') {
return 'Undefined';
}
return Undefined;
},
@eiriklv
eiriklv / build.js
Last active April 26, 2018 13:30
Tommy
/**
* Dependencies
*/
const spawn = require('cross-spawn');
/**
* Package.json
*/
const packageJson = require('../package.json');