https://github.com/acrool/acrool-react-img

Img library based for Reactjs
https://github.com/acrool/acrool-react-img

image-lazy-load img reactjs

Last synced: 10 months ago
JSON representation

Img library based for Reactjs

• Host: GitHub
• URL: https://github.com/acrool/acrool-react-img
• Owner: acrool
• License: mit
• Created: 2024-10-17T12:18:46.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2025-07-22T02:14:16.000Z (10 months ago)
• Last Synced: 2025-08-08T13:07:49.113Z (10 months ago)
• Topics: image-lazy-load, img, reactjs
• Language: TypeScript
• Homepage: https://acrool-react-img.pages.dev/
• Size: 1.48 MB
• Stars: 3
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md
  • Security: SECURITY.md

Awesome Lists containing this project

• awesome-react - Acrool React Img - Img (lazy) (React component)

README

          
# Acrool React Img



    





    Fast custom img for Reactjs





[![NPM](https://img.shields.io/npm/v/@acrool/react-img.svg?style=for-the-badge)](https://www.npmjs.com/package/@acrool/react-img)

[![npm](https://img.shields.io/bundlejs/size/@acrool/react-img?style=for-the-badge)](https://github.com/acrool/@acrool/react-img/blob/main/LICENSE)

[![npm](https://img.shields.io/npm/l/@acrool/react-img?style=for-the-badge)](https://github.com/acrool/react-img/blob/main/LICENSE)

[![npm downloads](https://img.shields.io/npm/dm/@acrool/react-img.svg?style=for-the-badge)](https://www.npmjs.com/package/@acrool/react-img)

[![npm](https://img.shields.io/npm/dt/@acrool/react-img.svg?style=for-the-badge)](https://www.npmjs.com/package/@acrool/react-img)



`^1.1.0 support react >=18.0.0 <20.0.0`

## Features

- Support width, height, aspect

- Support lazy load image

- Support mask animate

- Use native img tag with object-fit for better performance

## Why use img tag instead of background image?

Using the native img tag with object-fit provides better performance and accessibility. It also avoids potential issues with background image layering and provides native image attributes like alt text for better SEO and accessibility.

## Install

```bash

yarn add @acrool/react-img

```

## Usage

add in your index.tsx

```tst

import "@acrool/react-img/dist/index.css";

```

then in your page

```tsx

import {Flex, fr, Grid} from '@acrool/react-grid';

import styled from 'styled-components';

import {Img} from '@acrool/react-img';

import {generatorArray} from '@acrool/js-utils/array';

const Example = () => {

    return ;

};

export default Example;

```

There is also a example that you can play with it:

[![Play react-editext-example](https://raw.githubusercontent.com/acrool/acrool-react-img/main/play-in-example-button.svg)](https://acrool-react-img.pages.dev)

## License

MIT © [Acrool](https://github.com/acrool) & [Imagine](https://github.com/imagine10255)