v0.1.2

🚀 New Feature Alert! 🚀

Introducing the useImageSrc Hook

Hey there, fellow developers! We are excited to announce a new feature in our latest release - the "useImageSrc" hook! 🎉

With the useImageSrc hook, you can now effortlessly manage image sources in your React applications using the power of React's built-in useState hook. Whether you are using Next.js or Vite as your build tool, this hook is fully compatible and designed to work seamlessly in both environments.

How does it work?

The useImageSrc hook comes with two main functionalities:

1. setDefaultImageSrc: Set a default image source that will be used in case of image loading errors or when the original image source is unavailable.

2. useImageSrc: A custom hook that allows you to use the default or custom image source in your components. If the provided image source encounters an error, it will automatically fallback to the default image source.

Installation

To start using the useImageSrc hook in your React project, simply follow these steps:

1. Install the @turistikrota/ui v0.1.2 or higher:

npm install @turistikrota/ui@latest

Usage

Import and use the hook in your components:

With NextJS

'use client'

import Image from 'next/image'
import { useImageSrc, setDefaultImageSrc } from '@turistikrota/ui/hooks/image'

setDefaultImageSrc('/path/to/dummy-image.png')

export default function MyComponent()  {
  const { src, onError } = useImageSrc('/path/to/image.png')

  return (
    <Image src={src} onError={onError} alt='Image' width={100} height={100} />
  )
}

With Vite

import { useImageSrc, setDefaultImageSrc } from '@turistikrota/ui/hooks/image'

setDefaultImageSrc('/path/to/dummy-image.png')

export default function MyComponent()  {
  const { src, onError } = useImageSrc('/path/to/image.png')

  return (
    <img src={src} onError={onError} alt='Image' />
  )
}

Why should you use it?

The useImageSrc hook offers a simple and elegant solution for handling image sources in your React applications. By setting a default image source, you ensure that your users always see a fallback image when the original one is not available or failed to load. This enhances the user experience and eliminates broken image issues on your website or web application.

Upgrade now!

Don't wait any longer to improve your image handling in React projects. Upgrade to the latest version and start using the useImageSrc hook today! We're confident it will make your development process smoother and your users happier.

Happy coding! 🎉🚀