Skip to content

Instantly share code, notes, and snippets.

View sag1v's full-sized avatar
🎯
Focusing

Sagiv ben giat sag1v

🎯
Focusing
View GitHub Profile
@sag1v
sag1v / useIsTextOverflow.js
Created August 18, 2022 09:51
React hook for checking if text is overflowing
View useIsTextOverflow.js
import { useState, useEffect, useCallback, useRef } from 'react';
function useIsTextOverflow(value) {
const [isOverflow, setIsOverflow] = useState(false);
const [elementRef, setElementRef] = useState(null);
const [elementSize, setElementSize] = useState(0);
const observerRef = useRef(null);
const refCallback = useCallback(node => {
if (node) {
View useStateWithCallback.jsx
function useStateWithCallback(initialValue) {
const [state, setState] = useState(initialValue);
// we need to track down last changes to support synchronous updates
// e.g, addEventListener handlers
const lastStateRef = useRef(initialValue);
// we need this flag for 2 reasons:
// 1. To prevent the call on mount (first useEffect call)
// 2. To force the effect to run when the state wasn't really updated
@sag1v
sag1v / Markdium-JSX.jsx
Created November 25, 2019 14:27
Markdium-JavaScript - The prototype chain in depth
View Markdium-JSX.jsx
Player.prototype.setScore = function(newScore){
this.score = newScore;
}
@sag1v
sag1v / Markdium-JSX.jsx
Created November 25, 2019 14:27
Markdium-JavaScript - The prototype chain in depth
View Markdium-JSX.jsx
player1.setScore(1000);
player2.setScore(2000);
@sag1v
sag1v / Markdium-JSX.jsx
Created November 25, 2019 14:27
Markdium-JavaScript - The prototype chain in depth
View Markdium-JSX.jsx
function createPlayer(userName, score) {
const newPlayer = {
userName,
score,
setScore(newScore) {
newPlayer.score = newScore;
}
}
return newPlayer;
}
@sag1v
sag1v / Markdium-JSX.jsx
Created November 25, 2019 14:27
Markdium-JavaScript - The prototype chain in depth
View Markdium-JSX.jsx
function Player(userName, score) {
this.userName = userName;
this.score = score;
}
Player.prototype.setScore = function(newScore) {
this.score = newScore;
}
@sag1v
sag1v / Markdium-JSX.jsx
Created November 25, 2019 14:27
Markdium-JavaScript - The prototype chain in depth
View Markdium-JSX.jsx
const player1 = Object.create(null)
player1.userName = 'sag1v';
player1['score'] = 700;
player1.setScore = function(newScore) {
player1.score = newScore;
}
@sag1v
sag1v / Markdium-JSX.jsx
Created November 25, 2019 14:27
Markdium-JavaScript - The prototype chain in depth
View Markdium-JSX.jsx
Player.call(this, userName, score)
@sag1v
sag1v / Markdium-JSX.jsx
Created November 25, 2019 14:27
Markdium-JavaScript - The prototype chain in depth
View Markdium-JSX.jsx
double.toString()
@sag1v
sag1v / Markdium-JSX.jsx
Created November 25, 2019 14:27
Markdium-JavaScript - The prototype chain in depth
View Markdium-JSX.jsx
{
userName: 'sag1v',
score: 700,
setScore: ƒ
}
{
userName: 'sarah',
score: 900,
setScore: ƒ