Skip to content

Instantly share code, notes, and snippets.

View yairEO's full-sized avatar
🙂
Writing code

Yair Even Or yairEO

🙂
Writing code
View GitHub Profile
@yairEO
yairEO / input.scss
Last active January 10, 2022 18:32
Generated by SassMeister.com.
// styles of an external object which is placed
// next to a node from the outside
.diagram-node__satelite {
transform: translate(100px) var(--transform-y, );
}
@yairEO
yairEO / removeStyleProp.js
Last active December 22, 2021 18:35
Remove a single property from DOM element "style" attribute
const removeStyleProp = (elm, prop) =>
elm.style.cssText = elm.style.cssText // cssText automatically (luckily) adds spaces between declarations
.split('; ')
.filter(p => !p.startsWith(prop) )
.join(';');
@yairEO
yairEO / concatWithoutDups.js
Created November 6, 2021 18:58
Concatenates N arrays without dupplications
/**
* Concatenates N arrays without dups.
* If an array's item is an Object, compare by `value`
* @param {*} k
*/
export const concatWithoutDups = (...key) => {
const result = (...args) => {
const newArr = [],
existingObj = {};
@yairEO
yairEO / sb.mdx.file-code.js
Last active March 27, 2024 12:39
storybook MDX - show code block of imported file
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 14:33
Positions a DOM element next to a certain position
/**
* 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 March 4, 2021 16:37
javascript Math.clamp polyfill
// 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 March 2, 2021 09:42
React props to CSS variables

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 February 20, 2021 21:58
React Show-If HOC as declarative component for responsive 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 November 10, 2020 19:32
Deep Objects Merge (extending)
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 October 29, 2020 11:49
javascript isObject check
const isObject = obj => (obj+"") === "[object Object]"