Skip to content

Instantly share code, notes, and snippets.

Avatar
💜
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
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: {
avoidableModuleWithAlternative:
'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
*/
View properly-type-react-components.md

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>(() =>
Dimensions.get('screen'),
);
@mikaelbr
mikaelbr / cloudSettings
Last active May 22, 2020
Visual Studio Code Settings Sync Gist
View cloudSettings
{"lastUpload":"2020-05-22T11:42:02.254Z","extensionVersion":"v3.4.3"}
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
mikaelbr / own-jsx-final.js
Created Oct 8, 2019
Complete code example for blogpost "Using JSX for your own lightweight declarative library": https://medium.com/@mikaelbrevik/using-jsx-for-your-own-lightweight-declarative-library-a773d3796475
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