Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/Josh-McFarlin/remix-image
A React component for responsive images in Remix
https://github.com/Josh-McFarlin/remix-image
image react remix responsive
Last synced: 3 months ago
JSON representation
A React component for responsive images in Remix
- Host: GitHub
- URL: https://github.com/Josh-McFarlin/remix-image
- Owner: Josh-McFarlin
- License: mit
- Created: 2022-01-20T06:10:53.000Z (almost 3 years ago)
- Default Branch: master
- Last Pushed: 2023-08-22T11:03:24.000Z (about 1 year ago)
- Last Synced: 2024-07-18T18:57:23.497Z (4 months ago)
- Topics: image, react, remix, responsive
- Language: TypeScript
- Homepage: https://remix-image.mcfarl.in
- Size: 9.63 MB
- Stars: 322
- Watchers: 5
- Forks: 23
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Remix-Image
## 👋 Intro
A React component for responsive images in Remix.
This library lets you:
* Resize images to the minimum size needed for faster page loading
* Convert images to more efficient file types for faster page loader
* Apply transformations to images such as `resize`, `crop`, `rotate`, `blur`, and `flip`
* Cache commonly requested assets for the best performance
Turning:
```typescript jsx
```
Into:
```typescript jsx
```
Where the `responsive` sizes provided through the props are turned into image URLs served by the local server that are cached for fast and performant loading.
## 🚀 How to use
### Install
To install this library and its peer deps, use one of the following commands:
```bash
npm install -S remix-image @next-boost/hybrid-disk-cache
yarn add remix-image @next-boost/hybrid-disk-cache
```
### Docs
- Documentation for this library can be found at: [https://remix-image.mcfarl.in](https://remix-image.mcfarl.in)
- Several examples can be found in [examples/](examples/)