hooks#useOnImageLoad TypeScript Examples

The following examples show how to use hooks#useOnImageLoad. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: index.tsx    From exevo-pan with The Unlicense 6 votes vote down vote up 
FadeImage = ({ className, id, ...props }: ImageProps) => {
  const [loaded, onLoad] = useOnImageLoad()

  return (
    <Image
      className={clsx('transition-opacity', !loaded && 'opacity-0', className)}
      id={id}
      {...props}
      onLoad={onLoad}
    />
  )
}
Example #2
Source File: index.tsx    From exevo-pan with The Unlicense 6 votes vote down vote up 
Image = ({
  id,
  className,
  align = 'left',
  caption,
  ...props
}: ImageProps) => {
  const [loaded, onLoad] = useOnImageLoad()

  return (
    <figure
      id={id}
      className={clsx(
        'block',
        align === 'center' && 'mx-auto',
        align === 'right' && 'ml-auto',
        className,
      )}
    >
      <div className={clsx('transition-shadow', loaded && styles.wrapper)}>
        <NextImage
          {...props}
          className={clsx('transition-opacity', !loaded && 'opacity-0')}
          onLoad={onLoad}
          unoptimized
        />
      </div>
      {caption && (
        <figcaption className="text-tsm block text-center">
          {caption}
        </figcaption>
      )}
    </figure>
  )
}
Example #3
Source File: index.tsx    From exevo-pan with The Unlicense 5 votes vote down vote up 
SpritePortrait = ({
  offset = false,
  highlight = false,
  src,
  alt,
  width,
  height,
  onError,
  ...props
}: SpritePortraitProps) => {
  const {
    translations: { common },
  } = useTranslations()

  const [loaded, onLoad] = useOnImageLoad()

  return (
    <Background offset={offset} highlight={highlight} {...props}>
      <Image
        alt={alt}
        src={src}
        layout="fixed"
        width={width}
        height={height}
        onLoad={onLoad}
        onError={onError}
        unoptimized
        className={clsx('z-1 transition-opacity', !loaded && 'opacity-0')}
      />
      {!loaded && (
        <div
          role="alert"
          aria-label={common.LoadingLabel}
          aria-busy="true"
          className={clsx(
            'loading-spinner absolute',
            highlight ? 'after:bg-primaryHighlight' : 'after:bg-primaryVariant',
          )}
          style={{ top: 'calc(50% - 12px)', left: 'calc(50% - 12px)' }}
        />
      )}
    </Background>
  )
}