Skip to content

Instantly share code, notes, and snippets.

Avatar
🙂
Writing code

Yair Even Or yairEO

🙂
Writing code
View GitHub Profile
@yairEO
yairEO / sb.mdx.file-code.js
Last active Jun 8, 2021
storybook MDX - show code block of imported file
View sb.mdx.file-code.js
import { Meta, Description, Props, Source, Canvas } from '@storybook/addon-docs/blocks';
import Comp from './Comp';
import CompRaw from '!raw-loader!./Comp.jsx';
import readme from '!raw-loader!./readme.md';
<Meta
title="Comp/MDX"
component={Comp}
/>
@yairEO
yairEO / position.js
Created May 27, 2021
Positions a DOM element next to a certain position
View position.js
/**
* positions a DOM element next to a certain position
* @param {HTMLElement} elm DOM element node
* @param {Object} pos x,y which should probably be within the viewport visible area
*/
export default (elm, pos) => {
const overflowOffset = 20;
const pageSize = {
w: document.documentElement.clientWidth,
@yairEO
yairEO / Math.clamp.js
Created Mar 4, 2021
javascript Math.clamp polyfill
View Math.clamp.js
// usage: Math.clamp(min, number, max)
Math.clamp = Math.clamp || ((a,b,c) => Math.max(a,Math.min(b,c)))
@yairEO
yairEO / README.md
Last active Mar 2, 2021
React props to CSS variables
View README.md

Converts props into css variables in styled-components

Example usage

import React from 'react'
import styled from '@xstyled/styled-components'
import { cx, getCSSVars } from 'utils'

const StyledIconBase = styled.i`
@yairEO
yairEO / ShowIf.jsx
Last active Feb 20, 2021
React Show-If HOC as declarative component for responsive JSX
View ShowIf.jsx
import React, { useState, useEffect } from 'react'
const ShowIf = ({ children, breakpoint = 420, math = '>' }) => {
const [width, setWidth] = useState(window.innerWidth)
useEffect(() => {
const resizeObserver = new ResizeObserver(() => setWidth(window.innerWidth))
resizeObserver.observe(document.body)
return () => resizeObserver.unobserve(document.body)
@yairEO
yairEO / extend.js
Last active Nov 10, 2020
Deep Objects Merge (extending)
View extend.js
function extend( o, o1, o2) {
if( !(o instanceof Object) ) o = {};
copy(o, o1);
if( o2 )
copy(o, o2)
function copy(a,b){
// copy o2 to o
for( var key in b )
@yairEO
yairEO / isObject.js
Created Oct 29, 2020
javascript isObject check
View isObject.js
const isObject = obj => (obj+"") === "[object Object]"
@yairEO
yairEO / cx.js
Last active Oct 22, 2020
conditional multiple class names
View cx.js
const cx = (...list) => list.filter(Boolean).join(' ')
@yairEO
yairEO / useDidMountEffect.js
Created May 23, 2020
React useEffect - disable execution on first load
View useDidMountEffect.js
import React, { useEffect, useRef } from 'react';
const useDidMountEffect = (func, deps) => {
const didMount = useRef(false);
useEffect(() => {
if (didMount.current) func();
else didMount.current = true;
}, deps);
}
@yairEO
yairEO / mockAjaxPromise.js
Created Feb 25, 2020
mock async AJAX request
View mockAjaxPromise.js
const mockAjax = (timeout => (RES, duration) => {
clearTimeout(timeout); // abort last request
return new Promise((resolve, reject) => timeout = setTimeout(resolve, duration || 0, RES))
})()