Press n or j to go to the next uncovered block, b, p or k for the previous block.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | 2x 16x 16x 16x 16x 26x 22x 16x 16x 26x 22x 4x | import React, { Children, createRef, cloneElement, isValidElement } from 'react'; import useUntabbable from './useUntabbable'; import type { FC, RefObject } from 'react'; import type { Options } from './types'; const Untabbable: FC<Pick<Options, 'disabled'>> = (props) => { const { children, disabled } = props; const childrenAsArray = Children.toArray(children); const refs: Record<number, RefObject<HTMLElement>> = {}; childrenAsArray.forEach((child, index) => { if (isValidElement(child)) { refs[index] = createRef<HTMLElement>(); } }); useUntabbable(Object.values(refs), { disabled }); return ( <> {childrenAsArray.map((child, index) => { if (isValidElement(child)) { return cloneElement(child, { ref: refs[index] }); } return child; })} </> ); } export default Untabbable; |