https://github.com/glints-dev/fast-image
https://github.com/glints-dev/fast-image
Last synced: 5 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/glints-dev/fast-image
- Owner: glints-dev
- License: mit
- Created: 2020-07-16T01:26:32.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2022-02-28T18:07:38.000Z (over 4 years ago)
- Last Synced: 2025-09-20T10:59:28.902Z (9 months ago)
- Language: TypeScript
- Size: 96.7 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Fast Image
For now, you can do `yarn build` and `npx yalc publish` to publish this package to a mock local registry and then install it with `npx yalc link @glints/fast-image`. For development, run `yarn build` and `npx yalc push` to push the new version to all places where the package is linked.
## Releasing New Versions
Just follow the usual npm publish workflow:
```
git commit // commit your changes
npm run build
npm version patch // or minor or major
npm publish
git push --all // push your changes and tags to remote
```
## Usage
### FastImage
```
import { FastImage } from '@glints/fast-image';
// ...
```
The `imgProps.sizes` param will set the width of the image. If `lazy` is `true`, loading of the image will be deferred until the viewport reaches the position of the image in the page.
### ThumborContext
Add a `ThumborProvider` somewhere above your `FastImage`s to avoid having to pass `thumborServerURL` every time. Example:
```
import { ThumborProvider, FastImage } from '@glints/fast-image';
import config from './config';
// ...
<...>
```
### LazyImage
A tiny wrapper to add lazysizes lazy loading to an `![]()
`. Used by `FastImage` under the hood if `lazy=true` but might be handy if you don't want the Thumbor functionalities.
```
import { LazyImage } from '@glints/fast-image';
// ...
```
### getThumborImageURL
In case you need the thumbor URL directly. A bt inconvenient because you have to pass the thumborServerURL yourself. You may be able to get it from the ThumborContext though, if you have set it up, like so:
```
import React from 'react';
import { ThumborContext, getThumborImageURL } from '@glints/fast-image';
const MyComponent = () => {
const thumborServerURL = React.useContext(ThumborContext);
return 
;
}
```
The available options are `hmac`, `size`, `trim`, `trimSource`, `crop`, `fitIn`, `horizontalAlign`, `verticalAlign`, `smartCrop` and `filters`. See https://thumbor.readthedocs.io/en/latest/usage.html for their documentation.
### Lazy CSS `background-image`
Unfortunately there's no handy component for background images. But what you can do is utilize the `addClasses` feature from `lazysizes` (which is a dependency of this project anyway):
```
window.lazySizesConfig = {
// Add classes like 'lazyloaded' to lazyload elements. That allows us to toggle
// background-images in styled components when lazysizes determines that it
// should load.
addClasses: true,
};
// lazysizes is not exactly react friendly. It relies on global side effects to
// do it's thing. Importing it here will run those side effects (i.e. registering
// its event listeners and whatnot).
import 'lazysizes';
import styled from "styled-components';
const LazyBackgroundImage = styled.div`
background-color: gray;
&.lazyloaded {
background-image: url('https://glints-dashboard.s3.amazonaws.com/glints.png');
}
`;
// With getThumborImageURL
const LazyBackgroundThumborImage = styled.div`
background-color: gray;
&.lazyloaded {
background-image: url('${getThumborImageURL(
'https://images.glints.com',
'https://glints-dashboard.s3.amazonaws.com/glints.png'
{ size: { height: 128}}}
)}');
}
`;
```
This will lazy-load the image and show a grey solid color until the lazy-loaded image is ready.