Skip to content

Instantly share code, notes, and snippets.

@mistercoffee66
mistercoffee66 / 1. ResponsiveContext.jsx
Last active December 2, 2019 19:22
example of using React context hook for responsive design
import React, { createContext, useState } from 'react';
import PropTypes from 'prop-types';
const mq = 'screen and (max-width: 671px)';
const ResponsiveContext = createContext();
const ResponsiveContextProvider = ({ children }) => {
const [isMobile, setIsMobile] = useState(window.matchMedia(mq).matches);
matchMedia(mq).addEventListener('change', e => setIsMobile(e.matches));
@mistercoffee66
mistercoffee66 / trim-anything.js
Last active November 2, 2020 22:43
trim anything
export const trimAnything = (str, trimChar, opts = { start: false, end: true }) => {
if (str.length > 1 || opts.allowEmpty) {
let pattern;
if (opts.start && !opts.end) {
pattern = `^\\${trimChar}+`;
} else if (!opts.start && opts.end) {
pattern = `\\${trimChar}+$`;
} else {
pattern = `^\\${trimChar}+|\\${trimChar}+$`;
}
@mistercoffee66
mistercoffee66 / webpack.config.js
Created October 26, 2023 20:22
Set webpack dev server to use next avail open port in a range
const net = require('net');
const getOpenPort = async (port, maxPort) => {
const isPortAvail = (currentPort) => new Promise((resolve, reject) => {
const tester = net.createServer()
.once('error', (err) => (err.code === 'EADDRINUSE' ? resolve(false) : reject(err)))
.once('listening', () => tester.once('close', () => resolve(true)).close())
.listen(currentPort);
});