Acrool React Img

Fast custom img for Reactjs

Features

• Support width, height, aspect
• Support lazy load image
• Support mask animate

Install

yarn add @acrool/react-img

Usage

add in your index.tsx

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

then in your page

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 <Img
        src="https://acrool-react-picker.pages.dev/sample/1.jpg"
        w={200}
        h={200}
        r={8}
        isLazy
        isLazyMaskVisible
    />;
};

export default Example;

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

License

MIT © Acrool & Imagine