https://github.com/alstonchan/image
A simple React image component
https://github.com/alstonchan/image
image react-component responsive typescript vitejs
Last synced: 3 months ago
JSON representation
A simple React image component
- Host: GitHub
- URL: https://github.com/alstonchan/image
- Owner: AlstonChan
- License: mit
- Created: 2022-10-01T12:56:03.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2024-08-31T06:18:26.000Z (almost 2 years ago)
- Last Synced: 2025-02-19T01:35:21.227Z (over 1 year ago)
- Topics: image, react-component, responsive, typescript, vitejs
- Language: TypeScript
- Homepage: https://image-react-packages.onrender.com
- Size: 2.17 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# React Image Component
A simple, easy to use image component for React. (Compatible with NextJs)
## Installation
```bash
npm install @chan_alston/image@latest --save
```
## `Image` usage
```javascript
import styles from "./image.module.css";
import React from "react";
import Image from "@chan_alston/image";
import myImg from "../public/myImg.jpg";
import myImgSmall from "../public/myImgSmall.jpg";
import myImgMedium from "../public/myImgMedium.jpg";
import myImgBig from "../public/myImgBig.jpg";
const ImageComponent = ({ image }) => (
This is my image
);
export default ImageComponent;
```
### Properties of `Image`
| Properties | Type | Required | Default Value |
|-------------|:-------------------------:|:---------:|:-------------:|
| src | String or StaticImageData | true | |
| alt | String | true | |
| w | String or Number | false | |
| h | String or Number | false | |
| className | String | false | |
| srcSet | String | false | |
| sizes | String | false | |
| responsive | Boolean | false | true |
| priority | Boolean | false | false |
| imgRef | React.MutableRefObject | false | null |
| style | CSSProperties | false | {} |
| placeholder | String or StaticImageData | false | |
### Notes
- When `w`(width) and/or `h`(height) is set, `responsive` is set to **false** by default, unless explicitly specify with `responsive`.