@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
JavaScript
/*
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",
* });
* // <div ref={register()}></div>
* }
* ```
*/
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",
* });
* // <div ref={register()}></div>
* }
* ```
*/
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",
* });
* // <div ref={register()}></div>
* }
* ```
*/
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",
* });
* // <div ref={register()}></div>
* }
* ```
*/
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",
* });
* // <div ref={register()}></div>
* }
* ```
*/
function useReady(props) {
if (props === void 0) {
props = {};
}
return useImReady(props);
}
export { useImReady, usePreReady, usePreReadyElement, useReady, useReadyElement };
//# sourceMappingURL=imready.esm.js.map