Skip to content

Instantly share code, notes, and snippets.

@oakfang
oakfang / textHeight.js
Created May 4, 2020 12:30
Calculating the approximate height of text
import stringPixelWidth from "string-pixel-width";
export function getTextHeight(text, { textBlockWidth, lineHeight = 1.15, fontSize }) {
const paragraphs = text.split('\n');
const lineCountPerParagraph = paragraphs.map(paragraph => {
const words = paragraph.split(' ');
const [lineCount] = words.reduce(([lines, line], word, idx) => {
const expandedLine = line ? line + ` ${word}` : word;
if (stringPixelWidth(expandedLine, {size: fontSize}) < textBlockWidth) {
return [lines, expandedLine]
@oakfang
oakfang / storybook.config.js
Created January 1, 2020 07:04
center decorator
import React from "react";
import { configure, addDecorator } from "@storybook/react";
import styled from "styled-components";
import { MemoryRouter } from "react-router-dom";
import { ThemeService } from "services/theme";
const Center = styled.div`
display: flex;
justify-content: center;
align-items: center;
@oakfang
oakfang / query.jsx
Created December 31, 2019 12:25
Query params sync
import React, {
useState,
useCallback,
useLayoutEffect,
createContext,
useContext,
useMemo,
} from 'react';
import qs from 'qs';
import { useLocation, useHistory } from 'react-router-dom';
@oakfang
oakfang / blackbox.js
Last active June 6, 2019 07:01
Black box function
function blackBox() {
var input = [0, 1, 2, 3, 4];
var results = [];
for (var i = 0; i < input.length; i++) {
results.push(
new Promise(function(resolve) {
setTimeout(function() {
resolve(i);
}, 200);
})
alert();
@oakfang
oakfang / App.tsx
Created January 10, 2019 12:45
Typesafe inject
import React, { Component } from "react";
import { observable, action } from "mobx";
import { inject, Provider, observer } from "mobx-react";
import "./App.css";
declare module "mobx-react" {
type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
type Diff<MasterObject extends SubObject, SubObject extends Object> = Omit<
MasterObject,
@oakfang
oakfang / compose-mw.js
Created May 28, 2018 11:38
Compose middleware for express
function composeMiddleware(...middleware) {
return (req, res, next) => middleware
.reverse()
.reduce(
(next, mw) =>
() => mw(req, res, next),
next
)();
}
@oakfang
oakfang / RelativeRoute.jsx
Created April 30, 2018 12:05
Relative Routes with react-router v4
import React from 'react';
import { withRouter, Route } from 'react-router-dom';
const RelativeRoute = ({ match, path, ...props }) => <Route path={`${match.path}${path}`} {...props} />;
export default withRouter(RelativeRoute);
@oakfang
oakfang / ensure-oid.js
Created April 9, 2017 08:57
A function to ensure object id props of an object
import _ from 'lodash';
import { ObjectId } from 'mongoose';
import ensureObjectId from './utils';
exports default function ensureObjectIdProps(obj, paths) {
paths.forEach(prop => {
const currentValue = _.get(obj, prop);
_.set(obj, prop, currentValue ? ensureObjectId(currentValue) : new ObjectId());
});
return obj;
const getPrivateContainer = () => {
const privateProperties = new WeakMap();
const getPrivate = (instance, prop) => {
if (!privateProperties.has(instance)) {
privateProperties.set(instance, {});
}
return privateProperties.get(instance)[prop];
};
const setPrivate = (instance, prop, value) => {
if (!privateProperties.has(instance)) {