https://github.com/th3rdwave/web-image
<Image /> component for react-native-web
https://github.com/th3rdwave/web-image
Last synced: about 1 year ago
JSON representation
<Image /> component for react-native-web
- Host: GitHub
- URL: https://github.com/th3rdwave/web-image
- Owner: th3rdwave
- Created: 2020-05-11T19:42:33.000Z (about 6 years ago)
- Default Branch: main
- Last Pushed: 2024-09-11T15:43:37.000Z (almost 2 years ago)
- Last Synced: 2025-05-13T01:13:59.742Z (about 1 year ago)
- Language: TypeScript
- Homepage:
- Size: 2.51 MB
- Stars: 39
- Watchers: 2
- Forks: 2
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Web Image
[](https://github.com/th3rdwave/web-image/actions?query=workflow%3ACI) [](https://github.com/prettier/prettier) [](https://lerna.js.org/)
SSR friendly image component that renders to a `` element with screen density and webp support while keeping the same api as React Native ``.
## Features
- Same API and behavior as the react-native Image component.
- Uses modern browser features and is SSR / static website friendly.
- Lazy loading using the html `loading="lazy"` attritute (https://developer.mozilla.org/en-US/docs/Web/Performance/Lazy_loading).
- Automatic avif and webp file generation and loading for supported browsers.
- Density support using the same file naming convention as react-native.
- Automatic image dimensions for local assets.
## Install
```sh
npm install @th3rdwave/web-image @th3rdwave/web-image-loader
```
## Usage
### Local images
In your webpack config:
```js
{
...
module: {
rules: [
{
test: /\.(png|jpe?g|gif)$/,
loader: '@th3rdwave/web-image-loader',
},
]
}
}
```
In your app:
```js
import { Image } from '@th3rdwave/web-image';
;
```
### Network images
This image component can also be used with network image. To support multiple formats and densities you must build an object to use as the source prop.
```ts
type Source = {
/**
* Default url to use for the image.
*/
uri: string;
/**
* Responsive image sources.
*/
sources?: Array<{
/**
* Mime type for this source.
*/
type: string;
/**
* [srcset](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-srcset) for this source type.
*/
srcSet: string;
}>;
};
```
Example:
```js
```
## Caveats
- Curently only a small subset of Image props are implemented.
## Example
TODO
## Demo
- https://www.th3rdwave.coffee/