audunolsen

.wrapper {
    display: inline-flex;
    align-items: center;
    flex-direction: row;
    height: min-content;

    label {
        margin: 0;
        margin-left: 10px;
    }

audunolsen

import React, { useRef, useEffect, useCallback } from 'react';

/*
  A wrapper component which replicates the upcoming inert HTML attribute.
  I've made a custom implementation because the only polyfill out there (https://github.com/WICG/inert)
  plays very poorly with React.

  Needed for situations where an element needs to stay
  visible in the DOM but any of it's children shouldn't
  be reachable through keyboard navigation

audunolsen

/*
  TODO: Make mixin wich fire keyframes immidiately
  
  Tired or writing:

  .el {
    opacity: 1;
    animation: fadeout 0.5s ease-out forwards;

    @keyframes fadeout {

audunolsen

// …

const { openPortal, closePortal, isOpen, Portal } = usePortal(document.getElementById('modal-portal'));

// … 

return (
  <Portal>
    <h1>HELLO WORLD</h1>
  </Portal>

audunolsen

import { useEffect, useState, useRef, useCallback } from 'react';

// Typescripted version of https://ysfaran.github.io/blog/post/0002-use-state-with-promise/
// Used just as useState except it returns a promise resolving
// with the newly set state when component has rerendered

const useStatePromise = <T>(initialState: T): [T, (action: React.SetStateAction<T>) => Promise<T>] => {
  const [state, setState] = useState<T>(initialState);
  const resolverRef = useRef<null | ((state: T | PromiseLike<T>) => void)>(null);

audunolsen

// Resources for regular expressions:
// github.com/DamonOehlman/detect-browser/blob/master/src/index.ts
// https://github.com/faisalman/ua-parser-js/blob/master/src/ua-parser.js

const browsers = [
  ['edge', /Edge\/([0-9\._]+)/],
  ['edge-ios', /EdgiOS\/([0-9\._]+)/],
  ['samsung', /SamsungBrowser\/([0-9\.]+)/],
  ['edge-chromium', /EdgA?\/([0-9\.]+)/],
  ['chrome', /(?!Chrom.*OPR)Chrom(?:e|ium)\/([0-9\.]+)(:?\s|$)/],

audunolsen

interface BreakpointState {
  [key: string]: boolean;
}

export class Breakpoints {
  get all() {
    const serialized = isBrowser() && getComputedStyle(document.body).getPropertyValue('--breakpoints');
    let parsed;

    try {

audunolsen

c( 'cls' i === 3 && 'third', e.size === 'xl' ? 'x-large' : 'small', { variableName } )

audunolsen

/* eslint-disable */

/*

type Directions {
    top: boolean;
    left: boolean;
    bottom: boolean;
    right: boolean;
    horizontal: boolean;

audunolsen

/*

the npm module "classnames" has 5,549,574 weekly downloads
as of 06.11.2020. It has an unpacked size of 16.3 kB.
Why TF is such a trivial package so popular given its size?

Here's a 0.048 kB alternative:

*/