Skip to content

Instantly share code, notes, and snippets.

Testing statuses

Mikael Brevik mikaelbr

Testing statuses
View GitHub Profile
View import-warnings.js
module.exports = {
meta: {
type: 'problem',
fixable: 'code',
schema: [
type: 'object',
additionalProperties: {
type: 'string',
mikaelbr / avoid-import.js
Created Feb 25, 2021
eslint rule for marking some modules/packages as avoidable and providing a suggested replacement.
View avoid-import.js
module.exports = {
meta: {
type: 'problem',
fixable: 'code',
messages: {
'Package {{ actualModule }} should be avoided. Use {{ suggestedModule }} instead.',
avoidableModule: 'Package {{ actualModule }} should be avoided.',
View translations-warnings.js
module.exports = {
meta: {
type: 'problem',
fixable: 'code',
schema: [
type: 'object',
properties: {
translateFunctionIdentifier: {type: 'string'},
View use-is-loading.ts
import {useEffect, useState} from 'react';
* A specialized useState hook for doing isLoading messages. This delays
* setting flag as true for `delayTimeInMs`. This is to avoid unnecessary loading indicators.
* @param {boolean} initialState initial flag, true if loading false otherwise.
* @param {number} [delayTimeInMs=400] milliseconds to delay before setting flag to true
* @returns {[boolean, React.Dispatch<React.SetStateAction<boolean>>]} usual useState return

Proper way to Type React Components

I was slow to embrace TypeScript. Not because I think TypeScript is bad, but more for my love of the dynamism of JavaScript. Surprisingly, I find myself looking back at the past projects and they've all been in TypeScript. I think it might be time to face the truth: I mostly code in TypeScript. But in my React projects, there has always been one thing bothering me: React.FC.

For some reason when I was learning TypeScript and React almost all blog posts, tutorials and examples were using React.FC to type up function components. And

View allowed-children.tsx
type AllowedChildren =
| React.ReactElement<BasicItemProps>
| React.ReactElement<HeaderItemProps>
| AllowedChildren[];
type ListSectionProps = {
children: AllowedChildren;
const childrenTypes = [BasicItem, HeaderItem];
View use-screen-dimensions.ts
type ScreenDimensions = {
height: number;
width: number;
function useScreenDimension(): ScreenDimensions {
const [dimensions, setDimensions] = useState<ScreenDimensions>(() =>
mikaelbr / cloudSettings
Last active May 22, 2020
Visual Studio Code Settings Sync Gist
View cloudSettings
View api-router-library.js
import http from "http";
const db = createDb();
const app = createApp();
const router = app()
.on("GET", "/api/score", function(req, res) {
result(res, 200, { scores: db.entries() });
.on("POST", "/api/score", function(req, res) {
const { name, score } = req.body;
mikaelbr / own-jsx-final.js
Created Oct 8, 2019
Complete code example for blogpost "Using JSX for your own lightweight declarative library":
View own-jsx-final.js
// Using an IIFE to hide some implementation details.
// If you use a bundler this should be it's own file.
const createElement = (function() {
const isEvent = (k, v) => k.startsWith("on") && typeof v === "function";
const eventName = k => k.substr(2).toLowerCase();
const isString = s => typeof s === "string";
const isFunction = s => typeof s === "function";
function attrs(el, props) {
// Remember, JSX sets props to `null` if nothing is defined, so in that case we just return el