https://github.com/filejet/filejet-sdk-js
Filejet SDK for JavaScript.
https://github.com/filejet/filejet-sdk-js
filesystem image-processing
Last synced: 5 months ago
JSON representation
Filejet SDK for JavaScript.
- Host: GitHub
- URL: https://github.com/filejet/filejet-sdk-js
- Owner: filejet
- License: mit
- Created: 2024-06-12T06:10:36.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2025-12-18T06:09:41.000Z (6 months ago)
- Last Synced: 2025-12-21T15:05:16.622Z (6 months ago)
- Topics: filesystem, image-processing
- Language: TypeScript
- Homepage: https://filejet.io/
- Size: 92.8 KB
- Stars: 0
- Watchers: 0
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Filejet SDK
Filejet SDK
## Installation
```
yarn add @filejet/sdk
```
## Utils
**Generate `![]()
` attributes:**
To generate the correct `src` and `srcSet` attributes for the `![]()
` tag, you can use the `filejetImg` function.
It will return urls with the correct mutations to fit your requirements.
```ts
import { filejetImg } from '@filejet/sdk/utils';
const attributes = filejetImg({
src: 'https://myapp.com/image.jpg', // Either URL or file ID.
width: 128,
height: 128,
dpiScale: [1, 1.5, 2],
fit: 'cover',
backgroundColor: 'transparent',
filejetDomain: 'cdn.myapp.com',
});
// {
// src: '...',
// srcSet: '...',
// width: 128,
// height: 128
// }
}
console.log(attributes);
```
## React
To use the Filejet integration, you need to initialize the Filejet and
provide it through the ``.
```tsx
import { Filejet, FilejetProvider, LruCache } from '@filejet/sdk/react';
const filejet = new Filejet({
domain: 'cdn.app.com',
Img: {
dpiScale: [1, 1.5, 2],
placeholderNode:
,
errorNode: (
Failed to load
)
},
ThumbhashImg: {
cache: new LruCache({ maxSize: 512 }),
intersectRootMargin: 100
}
});
ReactDOM.render(
,
document.getElementById('root')
);
```
### Img component
`![]()
` component will render the image in the most optimized way.
`src` property can be either a filejet ID or HTTPs URL to external file.
```tsx
import { Img } from '@filejet/sdk/react';
;
```
**Recommended usage:**
It is recommended to alway use `thumbhash` in a combination with `height` to ensure dimensions are known before the image is loaded to prevent layout shift.
Thumbhash encodes both the blurred placeholder and its ratio, so client can avoid layout shifts even when the ratio is not known as it can be calculated from the thumbhash.
**Rendering process:**
Image starts with the single-color placeholder calculated from the average color of thumbhash. Then, when the image is in the viewport, the original image is fetched (scaled based on DPI). If the image is in browser's cache, it is rendered immediately. If not, the blurred placeholder is rendered until the image is loaded.
**Rendering priority:**
`priority` prop can be used to prioritize the image fetching, decoding and blurred placeholder rendering. Recommended value is `auto` (default). Using `low` will lead into longer time between the single-color placeholder and the real image.