UNPKG

@egjs/react-imready

Version:

This react module is used to wait for the image or video to be ready.

183 lines (176 loc) 5.04 kB
/* Copyright (c) NAVER Corp. name: @egjs/react-imready license: MIT author: NAVER Corp. repository: https://github.com/naver/egjs-imready version: 1.4.2 */ import { REACTIVE_IMREADY } from '@egjs/imready'; import { useReactive } from '@cfcs/react'; /** * React hook to check if the images or videos are loaded. * @ko 이미지와 비디오들이 로드가 됐는지 체크하는 react hook. * @memberof ReactImReady * @param - React ImReady's props </ko>React ImReady의 props.</ko> * @example * ```js * import { useImReady } from "@egjs/react-imready"; * * function App() { * const { * register, * isReady, * isPreReady, * preReadyCount, * readyCount, * totalCount, * } = useImReady({ * selector: "img", * }); * // &lt;div ref={register()}&gt;&lt;/div&gt; * } * ``` */ function useImReady(props) { if (props === void 0) { props = {}; } var result = useReactive(REACTIVE_IMREADY, function () { return props; }); return Object.assign(result, { register: function (ref) { return function (instance) { if (instance) { result.add(instance); } if (!ref) { return; } var refType = typeof ref; if (refType === "function") { ref(instance); } else { ref.current = instance; } }; } }); } /** * React hook to check if the images or videos are loaded. (only `usePreReadyElement`, `usePreReady` and `useError` are true) Since this is deprecated, use useImReady instead. * @ko 이미지와 비디오들이 로드가 됐는지 체크하는 react hook.(`usePreReadyElement`, `usePreReady`와 `useError`만 true) deprecated 되었으므로 useImReady를 이용해주세요. * @deprecated * @memberof ReactImReady * @param - React ImReady's props </ko>React ImReady의 props.</ko> * @example * ```js * import { usePreReadyElement } from "@egjs/react-imready"; * * function App() { * const { * register, * preReadyCount, * isPreReady, * hasError, * } = usePreReadyElement({ * selector: "img", * }); * // &lt;div ref={register()}&gt;&lt;/div&gt; * } * ``` */ function usePreReadyElement(props) { if (props === void 0) { props = {}; } return useImReady(props); } /** * React hook to check if the images or videos are loaded. (only `useReadyElement`, `useReady` and `useError` are true) Since this is deprecated, use useImReady instead. * @ko 이미지와 비디오들이 로드가 됐는지 체크하는 react hook.(`useReadyElement`, `useReady`와 `useError`만 true) deprecated 되었으므로 useImReady를 이용해주세요. * @deprecated * @memberof ReactImReady * @param - React ImReady's props </ko>React ImReady의 props.</ko> * @example * ```js * import { useReadyElement } from "@egjs/react-imready"; * * function App() { * const { * register, * readyCount, * isReady, * hasError, * } = useReadyElement({ * selector: "img", * }); * // &lt;div ref={register()}&gt;&lt;/div&gt; * } * ``` */ function useReadyElement(props) { if (props === void 0) { props = {}; } return useImReady(props); } /** * React hook to check if the images or videos are loaded. Since this is deprecated, use useImReady instead. * @ko 이미지와 비디오들이 로드가 됐는지 체크하는 react hook. deprecated 되었으므로 useImReady를 이용해주세요. * @deprecated * @memberof ReactImReady * @param - React ImReady's props </ko>React ImReady의 props.</ko> * @example * ```js * import { usePreReady } from "@egjs/react-imready"; * * function App() { * const { * register, * isPreReady, * hasError, * } = usePreReady({ * selector: "img", * }); * // &lt;div ref={register()}&gt;&lt;/div&gt; * } * ``` */ function usePreReady(props) { if (props === void 0) { props = {}; } return useImReady(props); } /** * React hook to check if the images or videos are loaded. (only `useReady` and `useError` are true) Since this is deprecated, use useImReady instead. * @ko 이미지와 비디오들이 로드가 됐는지 체크하는 react hook.(`useReady`와 `useError`만 true) deprecated 되었으므로 useImReady를 이용해주세요. * @deprecated * @memberof ReactImReady * @param - React ImReady's props </ko>React ImReady의 props.</ko> * @example * ```js * import { useReady } from "@egjs/react-imready"; * * function App() { * const { * register, * isReady, * hasError, * } = useReady({ * selector: "img", * }); * // &lt;div ref={register()}&gt;&lt;/div&gt; * } * ``` */ function useReady(props) { if (props === void 0) { props = {}; } return useImReady(props); } export { useImReady, usePreReady, usePreReadyElement, useReady, useReadyElement }; //# sourceMappingURL=imready.esm.js.map