Коробка не должна вмещаться при следующих случаях:
1) Если хотя бы одна сторона больше чем max(radius, height)
2) Если три стороны больше, чем min(radius, height)
import React, { useMemo } from "react";
import * as S from "./dots.style";
function makeData(dots, shift, width) {
const normShift = shift >= 0 ? shift : shift - dots.length * shift;
return dots.map((dot, index) => ({
key: dot,
isFirst: index === 0,
isLast: index === dots.length - 1,
left: ((normShift + index) % dots.length) * width
}));
}
export const Dots = ({ dots, shift }) => {
const data = useMemo(() => makeData(dots, shift, 25), [dots, shift]);
return (
<S.Container>
{data.map(({ key, left, children }) => (
<S.Dot key={key} left={left}>
{key}
</S.Dot>
))}
</S.Container>
);
};if (state.key[objKey]) {
const copy = {...state.key};
delete copy[objKey];
return { ...state, key: copy };
}<img src={getImage(el.id)} /> поместить в отдельный реактовский компонент, например, StorageImage. Далее возможны различные варианты в зависимости от того, что используется на проекте. Наиболее простой - useQuery - это обеспечит кэширование и обновление стейта из коробки, и все остальные детали, прям вот всё что нужно для данного кейса.
const result = '{red}hello world{endRed}'.replace(/\{(?:end[A-Z][a-zA-Z]*|([a-z]+))\}/g,
(m, c) => c ? `<span style="color:${c}">` : `</span>`);ctx.drawImage(img, ...); // рисование картинки на канве
const data = ctx.getImageData(0, 0, canvas.width, canvas.height); // пиксели картинкиconst myFunction = <K extends keyof MyObjectTypes>(key: K): MyObjectTypes[K] => myObject[key];const useCheckMounted = (): (() => boolean) => {
const ref = useRef(true)
useLayoutEffect(() => {
ref.current = true
return () => {
ref.current = false
}
}, [ref])
return useCallback(() => {
return ref.current
}, [ref])
}
// пример использования:
const Child: React.FC = React.memo(() => {
const check = useCheckMounted()
useEffect(() => {
console.log('check1, ', check())
setTimeout(() => {
console.log('check2, ', check())
}, 8000)
}, [check])
return <div>child</div>
})(?=(\d+))\1(?![a-z])(\d+)(?!\d*[a-z])