UNPKG

1.8 kBTypeScriptView Raw
1/**
2 * This function creates a ResizeObserver used to handle resize events for the given containerRef. If ResizeObserver
3 * or the given containerRef are not available, a window resize event listener is used by default.
4 *
5 * Example 1:
6 *
7 * private containerRef = React.createRef<HTMLDivElement>();
8 * private observer: any = () => {};
9 *
10 * public componentDidMount() {
11 * this.observer = getResizeObserver(this.containerRef.current, this.handleResize);
12 * }
13 *
14 * public componentWillUnmount() {
15 * this.observer();
16 * }
17 *
18 * private handleResize = () => {
19 * if (this.containerRef.current && this.containerRef.current.clientWidth) {
20 * this.setState({ width: this.containerRef.current.clientWidth });
21 * }
22 * };
23 *
24 * public render() {
25 * return (
26 * <div ref={this.containerRef} >
27 * <Chart width={this.state.width} ... />
28 * </div>
29 * );
30 * }
31 *
32 * Example 2:
33 *
34 * private inputRef = React.createRef<HTMLInputElement>();
35 * private observer: any = () => {};
36 *
37 * public componentDidMount() {
38 * this.observer = getResizeObserver(this.inputRef.current, this.handleResize);
39 * }
40 *
41 * public componentWillUnmount() {
42 * this.observer();
43 * }
44 *
45 * private handleResize = () => {
46 * if (this.inputRef.current) {
47 * trimLeft(inputRef.current, String(this.props.value));
48 * }
49 * };
50 *
51 * public render() {
52 * return (
53 * <input ref={this.inputRef} ... />
54 * );
55 * }
56 *
57 * @param {Element} containerRefElement The container reference to observe
58 * @param {Function} handleResize The function to call for resize events
59 * @return {Function} The function used to unobserve resize events
60 */
61export declare const getResizeObserver: (containerRefElement: Element, handleResize: () => void) => () => void;
62//# sourceMappingURL=resizeObserver.d.ts.map
\No newline at end of file