Source: svelte-imready/src/svelte-imready/useImReady.ts

  1. import { useReactive, ReactiveAdapterResult } from "@cfcs/svelte";
  2. import { ImReadyReactiveProps, REACTIVE_IMREADY } from "@egjs/imready";
  3. export interface SvelteImReadyResult extends ReactiveAdapterResult<typeof REACTIVE_IMREADY> {
  4. register(element: HTMLElement): any;
  5. }
  6. /**
  7. * Svelte hook to check if the images or videos are loaded.
  8. * @ko 이미지와 비디오들이 로드가 됐는지 체크하는 svelte hook.
  9. * @memberof SvelteImReady
  10. * @param - Svelte ImReady's props </ko>Svelte ImReady의 props.</ko>
  11. * @example
  12. * ```js
  13. * import { useImReady } from "@egjs/svelte-imready";
  14. *
  15. * const {
  16. * register,
  17. * isReady,
  18. * isPreReady,
  19. * preReadyCount,
  20. * readyCount,
  21. * totalCount,
  22. * } = useImReady({
  23. * selector: "img",
  24. * });
  25. * // &lt;div use:register &gt;&lt;/div&gt;
  26. * ```
  27. */
  28. export function useImReady(props: Partial<ImReadyReactiveProps> = {}): SvelteImReadyResult {
  29. const result = useReactive(REACTIVE_IMREADY, () => props);
  30. return Object.assign(result, {
  31. register(element: HTMLElement) {
  32. result.add(element);
  33. return {
  34. destroy() {
  35. return;
  36. },
  37. };
  38. },
  39. });
  40. }
comments powered by Disqus