Namespace: ReactImReady

Methods

staticReactImReady.useImReady(props){ReactImReadyResult}

useImReady.tsx, line 33

React hook to check if the images or videos are loaded.

이미지와 비디오들이 로드가 됐는지 체크하는 react hook.

• props (default: {}) optional
  Type: Partial<ImReadyReactiveProps>

  React ImReady's props React ImReady의 props.

  React ImReady's props React ImReady의 props.

Returns:

Type	Description
ReactImReadyResult

Example

import { useImReady } from "@egjs/react-imready";

function App() {
  const {
        register,
        isReady,
        isPreReady,
        preReadyCount,
        readyCount,
        totalCount,
    } = useImReady({
        selector: "img",
    });
    // <div ref={register()}></div>
}

staticReactImReady.usePreReady(props){ReactImReadyResult}

usePreReady.tsx, line 26

React hook to check if the images or videos are loaded. Since this is deprecated, use useImReady instead.

이미지와 비디오들이 로드가 됐는지 체크하는 react hook. deprecated 되었으므로 useImReady를 이용해주세요.

• props (default: {}) optional
  Type: Partial<ImReadyReactiveProps>

  React ImReady's props React ImReady의 props.

  React ImReady's props React ImReady의 props.

Returns:

Type	Description
ReactImReadyResult

Example

import { usePreReady } from "@egjs/react-imready";

function App() {
  const {
        register,
        isPreReady,
        hasError,
    } = usePreReady({
        selector: "img",
    });
    // <div ref={register()}></div>
}

Deprecated

• Yes

staticReactImReady.usePreReadyElement(props){ReactImReadyResult}

usePreReadyElement.tsx, line 27

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.

이미지와 비디오들이 로드가 됐는지 체크하는 react hook.(usePreReadyElement, usePreReady와 useError만 true) deprecated 되었으므로 useImReady를 이용해주세요.

• props (default: {}) optional
  Type: Partial<ImReadyReactiveProps>

  React ImReady's props React ImReady의 props.

  React ImReady's props React ImReady의 props.

Returns:

Type	Description
ReactImReadyResult

Example

import { usePreReadyElement } from "@egjs/react-imready";

function App() {
  const {
        register,
        preReadyCount,
        isPreReady,
        hasError,
    } = usePreReadyElement({
        selector: "img",
    });
    // <div ref={register()}></div>
}

Deprecated

• Yes

staticReactImReady.useReady(props){ReactImReadyResult}

useReady.tsx, line 26

React hook to check if the images or videos are loaded. (only useReady and useError are true) Since this is deprecated, use useImReady instead.

이미지와 비디오들이 로드가 됐는지 체크하는 react hook.(useReady와 useError만 true) deprecated 되었으므로 useImReady를 이용해주세요.

• props (default: {}) optional
  Type: Partial<ImReadyReactiveProps>

  React ImReady's props React ImReady의 props.

  React ImReady's props React ImReady의 props.

Returns:

Type	Description
ReactImReadyResult

Example

import { useReady } from "@egjs/react-imready";

function App() {
  const {
        register,
        isReady,
        hasError,
    } = useReady({
        selector: "img",
    });
    // <div ref={register()}></div>
}

Deprecated

• Yes

staticReactImReady.useReadyElement(props){ReactImReadyResult}

useReadyElement.tsx, line 27

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.

이미지와 비디오들이 로드가 됐는지 체크하는 react hook.(useReadyElement, useReady와 useError만 true) deprecated 되었으므로 useImReady를 이용해주세요.

• props (default: {}) optional
  Type: Partial<ImReadyReactiveProps>

  React ImReady's props React ImReady의 props.

  React ImReady's props React ImReady의 props.

Returns:

Type	Description
ReactImReadyResult

Example

import { useReadyElement } from "@egjs/react-imready";

function App() {
  const {
        register,
        readyCount,
        isReady,
        hasError,
    } = useReadyElement({
        selector: "img",
    });
    // <div ref={register()}></div>
}

Deprecated

• Yes

Type Definitions

ReactImReady.ImReadyPropsTSInterface

Properties:

Name	Type	Description
prefix	string	Prefix for data size attribute. 데이터 사이즈 속성의 접두사.
loaders	Record<string, new (target: HTMLElement, options: ImReadyLoaderOptions) => Loader>	The loader class map that determines how to ready for the element. element에 대해 어떻게 준비할지 결정하는 loader 클래스 맵.
selector	string
useReadyElement	boolean
useReady	boolean
usePreReadyElement	boolean
usePreReady	boolean
useError	boolean

ReactImReady.ImReadyValueTSInterface

Properties:

Name	Type	Description
hasError	boolean	Whether there is an error in the element 해당 엘리먼트에 에러가 있는지 여부
errorCount	number	The number of elements with errors 에러가 있는 엘리먼트들의 개수
totalErrorCount	number	The total number of targets with errors 에러가 있는 타겟들의 총 개수
preReadyCount	number	Number of elements pre-ready 사전 준비된 엘리먼트들의 개수
readyCount	number	Number of elements ready 준비된 엘리먼트들의 개수
totalCount	number	Total number of elements 엘리먼트들의 총 개수
isPreReady	boolean	Whether all elements are pre-ready 모든 엘리먼트가 사전 준비가 끝났는지 여부
isReady	boolean	Whether all elements are ready 모든 엘리먼트가 준비가 끝났는지 여부
isPreReadyOver	boolean	Whether pre-ready is over 사전 준비가 끝났는지 여부
register	<T extends HTMLElement>(ref?: Ref<T>) => RefCallback<T>	Ref function that can register the element to be checked 체크할 엘리먼트를 등록할 수 있는 ref 함수