Skip to content

Instantly share code, notes, and snippets.

✍️
Working on something exciting

Alexey Raspopov alexeyraspopov

✍️
Working on something exciting
Block or report user

Report or block alexeyraspopov

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
View useInterval.js
function useInterval(callback, delay) {
let handler = useRef(callback);
useEffect(() => {
handler.current = callback;
}, [callback]);
useEffect(() => {
let timer = setInterval(handler.current, delay);
return () => clearInterval(timer);
View Refactoring.md

Given a function component

export default function MyComponent({ value }) {
  return (
    <div>
      <p>{value}</p>
    </div>
  );
}
View ReactErrorBoundary.js
export class ErrorBoundary extends React.Component {
constructor(props) {
super(props);
this.state = { error: null };
}
static get defaultProps() {
return { fallback: null, onError: () => null };
}
View ContextReduxDuality.md

Assuming we have a state identity and state reducer

let resourceIdentity = Map();

function resourceReducer(state, action) {
  switch (action) {
    // ...
    default:
      return state;
View useDebounced.js
function useDebounced(value, delay) {
let [debounced, setDebounced] = useState(value);
useEffect(() => {
let timer = setTimeout(() => {
setDebounced(value);
}, delay);
return () => {
clearTimeout(timer);
};
View ticks.js
export function scaleTicks(start, stop, count) {
let step = tickIncrement(start, stop, count);
if (step > 0) {
let t0 = Math.ceil(start / step);
let t1 = Math.floor(stop / step);
let ticks = new Array(Math.ceil(t1 - t0 + 1));
return Array.from(ticks, (_, i) => (t0 + i) * step);
} else {
let t0 = Math.floor(start * step);
let t1 = Math.ceil(stop * step);
View randomNormal.js
// Gaussian random number generator based on Box-Muller transformation
export function* randomNormal(mu, sigma) {
let x = null;
let y = null;
let s = null;
while (true) {
do {
x = 2 * Math.random() - 1;
y = 2 * Math.random() - 1;
View useDerivedState.js
function useDerivedState(data) {
let [state, setState] = useState(data);
let [prev, setPrev] = useState(data);
if (data !== prev) {
setPrev(data);
setState(data);
}
return [state, setState];
@alexeyraspopov
alexeyraspopov / Dialog.js
Last active Apr 16, 2019
HTML5 Dialog & React
View Dialog.js
import React, { createRef, forwardRef, useLayoutEffect, useMemo } from 'react';
export let Dialog = forwardRef((props, ref) => {
let dialogRef = useMemo(() => ref || createRef(), []);
useLayoutEffect(
() => {
dialogRef.current.showModal();
},
[dialogRef]
);
View LinearScale.js
function LinearScale(domain, range) {
let scale = v => interpolate(range, normalize(domain, v));
let inverse = v => interpolate(domain, normalize(range, v));
return Object.assign(scale, { inverse });
}
function normalize(range, x) {
let k = range[1] - range[0];
let b = range[0];
return (x - b) / k;
You can’t perform that action at this time.