Skip to content

Instantly share code, notes, and snippets.

View karpolan's full-sized avatar
❤️
React + Node

Anton Karpenko karpolan

❤️
React + Node
View GitHub Profile
@karpolan
karpolan / mobileOrDesktop.js
Created December 31, 2020 10:14
React with Next/SSR/SSG, useful .onMobile or .onDestop class selector to apply different CSS styles
// In main App or Layout component add following:
const isMobile = useMediaQuery({ maxWidth: 767 }); // From react-responsive, Material UI or other styling library
useEffect(() => {
// Due to SSR/SSG we can not set 'app-layout onMobile' or 'app-layout onDesktop' on the server
// If we modify className using JS, we will got Warning: Prop `className` did not match. Server: "app-layout" Client: "app-layout onDesktop"
// So we have to apply document.body.class using the hook :)
if (isMobile) {
document.body.classList.remove('onDesktop');
@karpolan
karpolan / loglevelAsConsole.js
Last active October 7, 2022 01:23
Extension for LogLevel npm (.time(), .endTime(), and so on)
import log from 'loglevel';
log.setLevel(process.env.LOG_LEVEL || process.env.REACT_APP_LOG_LEVEL || log.levels.ERROR);
log.info('log.level:', Object.keys(log.levels)[log.getLevel()]);
// Internal cache for time() and timeEnd() calls
const _timers = {};
/**
* Analog of console.time()
@karpolan
karpolan / InvisibleRef.js
Created July 26, 2020 21:29
React <InvisibleRef /> component to avoid "Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()"
import React from 'react'
/**
* Renders "invisible" div to use as a first element in Material UI Menu, and other popup components who obtain
* a DOM ref from the child component. This allows to avoid: "Warning: Function components cannot be given refs.
* Attempts to access this ref will fail. Did you mean to use React.forwardRef()"
* @class InvisibleRef
*/
const InvisibleRef = React.forwardRef((props, ref) => {
const styleInvisible = {
@karpolan
karpolan / ObjectAsList.js
Last active February 12, 2023 20:25
React component to print out <ul> list with all properties of JavaScript object
import { useMemo } from 'react';
const sortByAbc = ([a], [b]) => a.localeCompare(b);
const sortByZxy = ([a], [b]) => b.localeCompare(a);
const sortNone = () => 0;
/**
* Renders <ul> list with all properties of the given JavaScript object
* @param {object} object - object to print out
* @param {boolean} [sortAbc] - properties sorted A-Z when true
@karpolan
karpolan / docker-compose-postgres.yml
Last active May 28, 2021 23:30
docker-compose for PostgreSQL + PgAdmin
version: "3.8"
services:
# PostgeSQL server is running on localhost:8200
postgres:
image: postgres
restart: always
environment:
POSTGRES_PASSWORD: postgres
POSTGRES_USER: postgres
@karpolan
karpolan / safe-chars.js
Created September 24, 2019 12:25
Unmistakable, easy to read, and "safe" chars as String constants
const UNMISTAKABLE_CHARS = "23456789ABCDEFGHJKLMNPQRSTWXYZabcdefghijkmnopqrstuvwxyz";
const BASE64_CHARS = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ" + "0123456789-_";
// For https://www.hackerrank.com/challenges/climbing-the-leaderboard/problem
function climbingLeaderboard(scores, alice) {
let positionsCount = 1;
const uscores = [scores[0]]; // Unique scores only, shorter array
scores.reduce((prev, curr) => {
if (prev != curr) {
positionsCount++;
uscores.push(curr)
@karpolan
karpolan / withSuspense.js
Created August 10, 2019 10:46
withSuspense() HOC for React.lazy() + React.Suspense
import React from 'react';
import { CircularProgress, LinearProgress } from '@material-ui/core/';
/**
* Wraps the React Component with React.Suspense and FallbackComponent while loading.
* @param {React.Component} WrappedComponent - lazy loading component to wrap.
* @param {React.Component} FallbackComponent - component to show while the WrappedComponent is loading.
*/
export const withSuspense = (WrappedComponent, FallbackComponent = null) => {
return class extends React.Component {
@karpolan
karpolan / shuffle.js
Created August 10, 2019 10:44
Shuffle the Array in JavaScript
/* eslint-disable import/prefer-default-export */
/* eslint-disable no-param-reassign */
/**
* Shuffles array in place. ES6 version.
* @param {Array} a - array containing all items to shuffle.
*/
export function shuffle(a) {
for (let i = a.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));