react-dom#findDOMNode TypeScript Examples

The following examples show how to use react-dom#findDOMNode. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: input.tsx    From kinopub.webos with MIT License 6 votes vote down vote up 
Input: React.FC<Props> = ({ className, onChange, autoFocus, ...props }) => {
  const inputRef = useRef<HTMLInputElement>(null);
  const handleChange = useCallback(
    ({ value }: { value: string }) => {
      onChange?.(value);
    },
    [onChange],
  );

  useEffect(() => {
    let frameId: number;

    if (autoFocus) {
      frameId = requestAnimationFrame(() => {
        const domNode = findDOMNode(inputRef.current) as HTMLDivElement;
        domNode?.querySelector('input')?.focus();
      });
    }

    return () => {
      if (frameId) {
        cancelAnimationFrame(frameId);
      }
    };
  }, [inputRef, autoFocus]);

  return (
    <InputBase
      {...props}
      // @ts-expect-error
      ref={inputRef}
      className={cx('w-full', className)}
      onChange={handleChange}
    />
  );
}
Example #2
Source File: SortableItem.tsx    From gio-design with Apache License 2.0 6 votes vote down vote up 
public componentDidMount() {
    const ref = this._createRef();
    const { connectDragSource, connectDropTarget } = this.props;
    /*eslint-disable */
    const domNode = findDOMNode(this.refs[ref]) as any as React.ReactElement<{}>;
    /* eslint-enable */
    connectDragSource(domNode);
    connectDropTarget(domNode);
  }
Example #3
Source File: ItemMeasurer.tsx    From tailchat with GNU General Public License v3.0 6 votes vote down vote up 
componentDidMount() {
    // eslint-disable-next-line react/no-find-dom-node
    this._node = findDOMNode(this);
    // Force sync measure for the initial mount.
    // This is necessary to support the DynamicSizeList layout logic.
    if (isSafari && this.props.size) {
      this._measureItemAnimFrame = window.requestAnimationFrame(() => {
        this._measureItem(false);
      });
    } else {
      this._measureItem(false);
    }

    if (this.props.size) {
      // Don't wait for positioning scrollbars when we have size
      // This is needed triggering an event for remounting a post
      this.positionScrollBars();
    }
  }
Example #4
Source File: useInViewport.ts    From kinopub.webos with MIT License 4 votes vote down vote up 
useInViewport = (
  target: React.MutableRefObject<React.ReactInstance | null | undefined>,
  props: Props,
  options?: IntersectionObserverInit,
  config = { disconnectOnLeave: false },
) => {
  const { onEnterViewport, onLeaveViewport } = props;
  const [, forceUpdate] = useState();

  const observer = useRef<IntersectionObserver | null>(null);

  const inViewportRef = useRef(false);
  const intersected = useRef(false);

  const enterCountRef = useRef(0);
  const leaveCountRef = useRef(0);

  const startObserver = useCallback(() => {
    if (target.current && observer.current) {
      const node = findDOMNode(target.current) as Element;
      if (node) {
        observer.current.observe(node);
      }
    }
  }, [target, observer]);

  const stopObserver = useCallback(() => {
    if (target.current && observer.current) {
      const node = findDOMNode(target.current) as Element;
      if (node) {
        observer.current.unobserve(node);
        observer.current.disconnect();
        observer.current = null;
      }
    }
  }, [target, observer]);

  const handleIntersection = useCallback(
    (entries) => {
      const entry = entries[0] || {};
      const { isIntersecting, intersectionRatio } = entry;
      const isInViewport = typeof isIntersecting !== 'undefined' ? isIntersecting : intersectionRatio > 0;

      // enter
      if (!intersected.current && isInViewport) {
        intersected.current = true;

        onEnterViewport?.();

        enterCountRef.current += 1;
        inViewportRef.current = isInViewport;

        forceUpdate(isInViewport);

        return;
      }

      // leave
      if (intersected.current && !isInViewport) {
        intersected.current = false;

        onLeaveViewport?.();

        if (config.disconnectOnLeave && observer.current) {
          // disconnect obsever on leave
          observer.current.disconnect();
        }

        leaveCountRef.current += 1;
        inViewportRef.current = isInViewport;

        forceUpdate(isInViewport);
      }
    },
    [observer, config.disconnectOnLeave, onEnterViewport, onLeaveViewport],
  );

  const initIntersectionObserver = useCallback(() => {
    if (!observer.current) {
      observer.current = new IntersectionObserver(handleIntersection, options);
    }
  }, [observer, options, handleIntersection]);

  useEffect(() => {
    initIntersectionObserver();
    startObserver();

    return () => {
      stopObserver();
    };
  }, [initIntersectionObserver, startObserver, stopObserver]);

  return {
    inViewport: inViewportRef.current,
    enterCount: enterCountRef.current,
    leaveCount: leaveCountRef.current,
  };
}